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;
}
