Tips for organizing a div into a dock panel

I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below.

Area A Area A should remain at the top with a set height that will not change.

Area B The height of Area B should vary between 0 and a minimum height. When the height of B is 0, Area C should expand to fill the space originally occupied by B.

The height of Area B can also increase from the minimum height to a value greater than the minimum height (X (X > min-height)). In this scenario, Area C should shrink to accommodate the increased height of Area B.

Area C Area C serves as the content area of the page and its height should adjust according to the height of Area B.

Area D Area D should stay fixed at the bottom of the page with an unchanging height.

I would like to know if it is feasible to achieve the above layout using CSS alone or if JQuery is necessary. If CSS can accomplish this, I am interested in understanding how? (Note: I have experience with achieving this using JQuery)

*I am coding in CSS3/HTML5

UPDATE I have included a link to this JSFiddle for reference.

I am uncertain if this question complies with the conditions of Stack Overflow. If not, please feel free to remove it.

jqueryhtmlcss

Answer №1

If you're considering browser support, the use of flexbox is a common solution. It's worth noting that while flexbox works well on most modern browsers, it does not have compatibility with IE 8 and 9. You can check out details here. I've actually written a blog post discussing this specific layout concern - feel free to read it here. One important thing to be aware of is the difference between the old draft syntax and the current standardized syntax supported by most browsers.

The setup for using flexbox goes like this:

  1. Create a container for A, B, C, and D. Apply 

    display: flex; flex-direction: column; height: 100%;
    to this container.

  2. A, B, and D maintain their own heights without additional requirements.

  3. C should expand or shrink to fill the leftover space. Use 

    flex-grow: 1; flex-shrink: 1; flex-basis: 0;
    or its short form flex: 1 1 0; on this element.

If flexbox isn't an option, consider using JavaScript as a fallback method. This involves adding a resize event listener to the window, measuring the heights of A, B, and D, and assigning the remaining height to C dynamically. Check out how this is done on https://jsfiddle.net/ with the id="content" div for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Build a Container Div using DOM/XPATH techniques

I have just initialized a new DOM XPATH OBJECT. After performing several operations, I saved my result using SaveHtml $String[] = $dom->saveHTML(); Next, I placed the content into a file. file_put_contents($filename, $string); The HTML Structure l ...

phphtmldomxpath

Challenges encountered while attempting to animate the CSS clip feature in WebKit

I've been searching everywhere for a solution to my issue, but none of them seem to work. As someone new to CSS3 Animations, I appreciate your patience. I created a simple animation using CSS3 that functions perfectly in IE and Firefox, however, it ...

cssgoogle-chromeanimationwebkit

Unable to use column formatting on a row using flexbox

I am working on creating a layout with rows and columns where the content in each column is vertically aligned. Here is an example of what I am trying to achieve: Currently, I am using react and have multiple components. The approach I believe will work ...

cssreactjsflexboxrowmultiple-columns

Leverage the geocode callback function results from Google Maps in NodeJS to render a map on the AngularJS 2 component template

Hey there, I'm currently utilizing the Google Maps Node.js client web API and want to showcase a map on my HTML views using AngularJS 2. I have a server export that sends an object to my AngularJS2 client service const googleMapsClient = require(&ap ...

htmlnode.jsgoogle-mapsangular

Issues with PHP not retrieving selected radio button values

Currently, I am using a PHP webpage to generate a list of all files with a .264 extension in a specific folder. Once the file is selected, it is then sent to a command for video playback on a display connected to the computer. I have encountered some diff ...

phphtmlforms

Can a shape similar to an inverted circle be created using CSS and jQuery?

I'm stumped on how to create an inverted circle in the corners. I've included a picture for reference. https://i.stack.imgur.com/jeNdh.jpg Is it feasible to achieve this effect using CSS3 or maybe jQuery? ...

javascriptjquerycsscss-shapes

Create HTML files that generate a log.txt document

It seems like every time I try to find a solution for writing files with PHP or JavaScript, I end up in a never-ending argument. Some say it's impossible, while others claim it's possible under certain conditions. Unfortunately, none of the code ...

phphtml

Personalizing/Concealing Navigation Controls

Looking for a way to customize the Navigation in the Pagination Plugin; changing 'First, Prev, Page 1, Page 2, Next, Last' to 'Prev, Next, Page 1 of 2' The documentation suggests using show_first_last set to false to hide 'First/L ...

javascriptjqueryhtmlcss

How Can I Utilize a URL Parameter Twice to Execute SQL Queries in Two asp.DataLists on a Single Page?

I've been trying everything, but I just can't seem to get one query to function properly. My goal is to retrieve information from the SQL Server database in two separate queries - one for album names (based on URL parameter) and another for song ...

c#htmlsql-serverselect

Is there a way to update the Angular component tag after it has been rendered?

Imagine we have a component in Angular with the selector "grid". @Component({ selector: 'grid', template: '<div>This is a grid.</div>', styleUrls: ['./grid.component.scss'] }) Now, when we include this gri ...

javascripthtmlangular

Checkbox ensemble computes total score

I am currently working on a project that involves multiple checkbox groups, with each group containing 3 checkboxes labeled as (1, X, 2). My goal is to assign a value of 100% to each group, distributed evenly among the checkboxes within it. The distributio ...

javascriptjqueryhtmlcheckbox

Issue with the div elements not aligning next to each other

I am facing an issue with my code in blade.php where I need to display images. The ideal layout would be to have the images stacked side by side within a div element, but unfortunately, it's not working as expected. I have tried using flex, bootstrap ...

htmlcss

I'm struggling to determine the source of the color for my linked CSS. Any ideas where to look?

I am experiencing an issue with a link that is displaying as white and gray for "a" and "a:hover", despite my CSS file specifying otherwise. Firebug confirms this, but I can't figure out what is overriding it. Can anyone offer any insight? Below is t ...

csscolors

Is it possible to target the last child element in CSS without relying on nesting

Is there a way to select the very last child of an element and apply a specific class without using nesting? For instance, how can I target only the final div in the structure below, nothing more and nothing less. <body> <div class="very-last- ...

csssass

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

javascripthtmlangulartypescriptrest-client

Unable to pass data from a Jquery ajax request to another function

I've written a basic ajax request using jQuery. Here is the code for my ajax function: var sendJqueryAjaxRequest = function(arrParams) { var request = $.ajax({ url: arrParams['url'], async: false, ...

javascriptajaxjquery

"Enhance Your Video Experience with a Personalized Play Button

Is it possible to customize the play icon for an embedded YouTube video? I came across a post discussing this topic: Can I change the play icon of embedded youtube videos? However, when trying to use something transparent as the new play button, the origin ...

javascripthtmlyoutube

Enhancing React-Admin with custom Material-UI theme overrides for targeted CSS selectors on a global scale

When working with React-Admin, I encountered a challenge in applying specific CSS code globally within my Material UI theme. As I set up my theme, I included the following lines in the overrides section: overrides: { "@global": { &quo ...

cssreactjsherokumaterial-uireact-admin

Guide on forwarding from one HTML page to another in the local disk

Currently, I am working on an employee appraisal application where users can submit appraisals that are stored in the backend. The initial page is a login screen. Once the user successfully logs in, they should be redirected to another page displaying in ...

htmlapache

Guide to dynamically refreshing a section of the webpage while fetching data from the database

I'm currently developing a website using PHP & MySQL where some queries return multiple records. Each record has its own dedicated page, allowing users to navigate between them using arrows. So far, everything is working smoothly. However, I've ...

phpjqueryhtmlmysqlcss