Fill remaining vertical space - only CSS


I need to fill the <strong>remaining vertical space</strong> of #wrapper under #first with #second div.

I need an only CSS solution.

<em>HTML :</em>

<div id="wrapper"> <div id="first"></div> <div id="second"></div> </div>

<em>CSS :</em>

#wrapper { width:300px; height:100%; } #first { width:300px; height:200px; background-color:#F5DEB3; } #second { width:300px; height:100%; //<-----This should fill the remaining space background-color:#9ACD32; }


You can do this with position:absolute; on the #second div like this :

<strong><a href="http://jsfiddle.net/webtiki/Cb5bu/" rel="nofollow">FIDDLE</a></strong>

<em>CSS :</em>

#wrapper{ position:relative; } #second { position:absolute; top:200px; bottom:0; left:0; width:300px; background-color:#9ACD32; }

<strong>EDIT : Alternative solution</strong>

Depending on your layout and the content you have in those divs, you could make it much more simple and with less markup like this :

<strong><a href="http://jsfiddle.net/webtiki/9TvM6/" rel="nofollow">FIDDLE</a></strong>

<em>HTML :</em>

<div id="wrapper"> <div id="first"></div> </div>

<em>CSS :</em>

#wrapper { height:100%; width:300px; background-color:#9ACD32; } #first { background-color:#F5DEB3; height: 200px; }


You can use CSS Flexbox instead another display value, The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.


/* CONTAINER */ #wrapper { width:300px; height:300px; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -ms-flex-direction: column; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } /* SOME ITEM CHILD ELEMENTS */ #first { width:300px; height: 200px; background-color:#F5DEB3; } #second { width:300px; background-color: #9ACD32; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, */ }

<a href="http://jsfiddle.net/5nsv8/" rel="nofollow">jsfiddle Example</a>

If you want to have full support for old browsers like IE9 or below, you will have to use a polyfills like <a href="https://github.com/doctyper/flexie" rel="nofollow">flexy</a>, this polyfill enable support for Flexbox model but only for 2012 spec of flexbox model.

Recently I found another polyfill to help you with Internet Explorer 8 & 9 or any older browser that not have support for flexbox model, I still have not tried it but I leave the link <a href="https://github.com/jonathantneal/flexibility" rel="nofollow">here</a>

You can find a usefull and <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">complete Guide to Flexbox model</a> by Chris Coyer <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">here</a>


Flexbox solution

<strong>Note:</strong> Add flex vendor prefixes if required by your <a href="http://caniuse.com/#search=flex" rel="nofollow">supported browsers</a>.

<pre class="snippet-code-css lang-css prettyprint-override">html, body { height: 100%; } .wrapper { display: flex; flex-direction: column; width: 300px; height: 100%; } .first { height: 50px; } .second { flex-grow: 1; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="wrapper"> <div class="first" style="background:#b2efd8">First</div> <div class="second" style="background:#80c7cd">Second</div> </div>


If you can add an extra couple of divs so your html looks like this:

<div id="wrapper"> <div id="first" class="row"> <div class="cell"></div> </div> <div id="second" class="row"> <div class="cell"></div> </div> </div>

You can make use of the display:table properties:

#wrapper { width:300px; height:100%; display:table; } .row { display:table-row; } .cell { display:table-cell; } #first .cell { height:200px; background-color:#F5DEB3; } #second .cell { background-color:#9ACD32; }

<a href="http://jsfiddle.net/3EjX8/" rel="nofollow">Example</a>


Have you tried changing the wrapper height to vh instead of %?

#wrapper { width:300px; height:100vh; }

That worked great for me when I wanted to fill my page with a gradient background for instance...


All you need is a bit of improved markup. Wrap the second within the first and it will render under.

<div id="wrapper"> <div id="first"> Here comes the first content <div id="second">I will render below the first content</div> </div> </div>

<a href="http://jsfiddle.net/9ETNU/2/" rel="nofollow">Demo</a>


If you don't want to have fix heights for your main-container (top, bottom, ....), you can simply use this <a href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css" rel="nofollow">css-file</a> to get a flex-container which uses the remaining space incl. working!!! scrollbars

<a href="http://jsfiddle.net/ym37e3sz/3/" rel="nofollow">Fiddler</a>

<!DOCTYPE html> <html > <head> <title>Flex Container</title> <link rel="stylesheet" href="http://demo.qooxdoo.org/5.0/framework/indigo-5.0.css"> <style> .cont{ background-color: blue; position: absolute; height: 100%; width: 100%; } .headerContainer { background-color: green; height: 100px; width: 100%; } .mainContainer { background-color: white; width: 100%; overflow: scroll } .footerContainer { background-color: gray; height: 100px; width: 100%; } </style> </head> <body class="qx-flex-ready" style="height: 100%"> <div class="qx-vbox cont"> <div class="headerContainer">Cell 1: flex1</div> <div class="mainContainer qx-flex3"> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> </div> <div class="footerContainer" >Cell 3: flex1</div> </div> </body> </html>


You can just add the <strong>overflow:auto</strong> option:

#second { width:300px; height:100%; overflow: auto; background-color:#9ACD32; }


you need javascript and some client side calculations: <a href="http://jsfiddle.net/omegaiori/NERE8/2/" rel="nofollow">http://jsfiddle.net/omegaiori/NERE8/2/</a>

you will need jquery to effectively achieve what you want. this function is very simple but very effective:

(function () { var heights = $("#wrapper").outerHeight(true); var outerHeights = $("#first").outerHeight(true); jQuery('#second').css('height', (heights - outerHeights) + "px"); })();

first it detects the wrapper height, as it is set to 100% it's different everytime (it depends on what screen you are landing). in the second step it gives the #second div the appropriate height subtracting from the wrapper height the #first div height. the result is the available height left in the wrapper div


  • How do I get Flexunit, FlexMojos and Mockolate to work together?
  • echo -e option in ubuntu doesn't work
  • Amazon EC2 virtualenv: pip says it installed numpy but python can't find it
  • Tiles 3 how to reference another definition in put-attribute
  • Top window's URL form inside of multiple nested cross-domain iFrames
  • Does externalizing sensitive config variables into a .properties outside of Config.groovy provide a
  • Consecutive calls/evaluations in a form?
  • R - Phylogram labels to vector
  • Learn Ruby Hard Way ex. 48
  • Javascript: parseInt() with trailing characters
  • JQueryMobile: SelectWidget not showing after second page visit
  • Convert ctime to unicode and unicode to ctime python
  • jaxb xsd prefix package names
  • Using SQL stored function gives invalid SQL statement
  • Why are my web pages zoomed in when I open them in Opera Mobile?
  • Lync Database - Mobile vs PC users
  • Touch events (touchesMoved) not working on UIViews inside UIScrollView
  • how to calculate distance between two points in google maps?
  • Put percent labels next to legend instead of in the slice
  • HABTM associations in Rails : collecting and counting the categories of a model's children
  • What is RSL (Runtime shared library ) used for in flash?
  • Multiple flexboxes with margin-right, except the last one in the row? Without JS?
  • Passing information to server-side function in a Google Docs Add On
  • text-align justify, cannot override
  • Is there any purpose for h2-h6 headings in HTML5?
  • Guava how to copy all files from one directory to another
  • Why doesnt this Java loop in a thread work?
  • cell spacing in div table
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • Image map in Flex
  • Is playing sound in Javascript performance heavy?
  • Chrome doesn't support silverlight anymore? How to solve this?
  • How to clear text inside text field when radio button is select
  • Xamarin Forms - UWP Fonts
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Javascript convert timezone issue
  • When should I choose bucket sort over other sorting algorithms?
  • Unanticipated behavior