I need to fill the remaining vertical space of #wrapper under #first with #second div.
I need an only CSS solution.
#wrapper { width: 300px; height: 100%; } #first { width: 300px; height: 200px; background-color: #F5DEB3; } #second { width: 300px; height: 100%; background-color: #9ACD32; }<div> <div></div> <div></div> </div>8 Answers
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.
Example
/* 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, */ } If you want to have full support for old browsers like IE9 or below, you will have to use a polyfills like flexy, 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 here
You can find a usefull and complete Guide to Flexbox model by Chris Coyer here
3Flexbox solution
html, body { height: 100%; } .wrapper { display: flex; flex-direction: column; width: 300px; height: 100%; } .first { height: 50px; } .second { flex-grow: 1; }<div> <div>First</div> <div>Second</div> </div>You can do this with position:absolute; on the #second div like this :
CSS :
#wrapper{ position:relative; } #second { position:absolute; top:200px; bottom:0; left:0; width:300px; background-color:#9ACD32; } EDIT : Alternative solution
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 :
HTML :
<div> <div></div> </div> CSS :
#wrapper { height:100%; width:300px; background-color:#9ACD32; } #first { background-color:#F5DEB3; height: 200px; } If you can add an extra couple of divs so your html looks like this:
<div> <div> <div></div> </div> <div> <div></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; } 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...
1If you don't want to have fix heights for your main-container (top, bottom, ....), you can simply use this css-file to get a flex-container which uses the remaining space incl. working!!! scrollbars
<!DOCTYPE html> <html > <head> <title>Flex Container</title> <link rel="stylesheet" href=""> <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> <div> <div>Cell 1: flex1</div> <div> 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 >Cell 3: flex1</div> </div> </body> </html> All you need is a bit of improved markup. Wrap the second within the first and it will render under.
<div> <div> Here comes the first content <div>I will render below the first content</div> </div> </div> You can just add the overflow:auto option:
#second { width:300px; height:100%; overflow: auto; background-color:#9ACD32; } 
