Fill remaining vertical space - only CSS

Question

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 id="wrapper">    <div id="first"></div>    <div id="second"></div>  </div>

Answer 1

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, */ } 

jsfiddle Example

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