StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAny reliable, cross-browser way to distribute the remaining space in parent element between several DIVs?
text
Body
copied!<h1>Background</h1> <p>I am working on a browser-based UI that needs to fill the entire screen without any scrolling. The basic layout is like this:</p> <p><img src="https://i.stack.imgur.com/fJzBE.png" alt="layout sketch"></p> <h1>What I want to achieve</h1> <p>The title div should has a fixed height (2em) and the rest 4 divs/panels should devide the remaining space of the screen according to percentages I set.</p> <h1>What I've tried</h1> <p>The best solution I've found is " <a href="https://stackoverflow.com/questions/7778306/css-how-to-force-elements-to-100-of-remaining-available-space-of-parent-eleme">CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?</a> ", which involves using a container div with <code>position:absolute</code>. This works across all browsers, but requires some additional DIVs to be created. Also, panel 2 can sometimes be forced to start on the next line due to <a href="https://stackoverflow.com/questions/8197708/html-css-can-percentage-width-divs-always-completely-fill-their-parent-containe">inaccuracies in percentage widths</a>.</p> <p>My previous solution was based on CSS3 <a href="http://www.html5rocks.com/en/tutorials/flexbox/quick/" rel="nofollow noreferrer">Flexbox</a>, but the model is flawed as it does not resize child elements that have a percentage height after stretching the container boxes (at least Chrome doesn't). (The newer flex-* attributes are only implemented in Chrome and the standard is still changing.)</p> <p>I have also tried the <a href="https://developer.mozilla.org/en/CSS/calc" rel="nofollow noreferrer">calc()</a> function; however, it's not yet implemented in Chrome. Also, it requires hard-coding the height of the title element in two places, which I've been trying to avoid.</p> <p><strong>Edit:</strong></p> <h1>What am I looking for</h1> <p>Just to be clear, I am not asking for a perfect/pure-CSS solution (as none seems to exist). If anyone can suggest any jQuery plug-in or open-source framework that can do this, it would be good enough for me.</p> <p>In addition, I don't require any backwards compatibility with browser releases before 2012. (As long as the solution uses technology that is implemented in some browser and is going to be implemented by Firefox and Chrome in the near future, it's good enough for me.)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload