CSS: div height to exactly fill remaining height of container div

Question

I have 2 divs Div1 and Div2 inside a container div.

Div1 is a menu bar with fixed height of 45px, and container div has 100% height. How can I ensure the Div2's height is exactly enough to fill the remaining container vertically, and any extra dynamic content in div2 create a vertical scroll in it.

Below is my CSS (fiddle: http://jsfiddle.net/adityajain/fh849/1/), problem is the height style of div#verticalDiv2

div#main-container {
   height:100%;
   overflow:hidden;
}
div#verticalDiv1{
   height:45px;
   width:100%;
   color: #EEE;
   background-color:#222;
}
div#vertivalDiv2{
   height:90%; //WHAT here ???
   width:100%;
   color: #222;
   background-color:#DDD;
   overflow-y:auto;
}

In case the dynamic content to vertical-div2 is very large, I don't want the vertical scroll to appear in container-Div, but in vertical-div2

Answer 1

You can use position:absolute; on #vertivalDiv2 with top:45px; bottom:0; . Don't forget to set position:relative; on the container.

DEMO

CSS :

html, body{
    height:100%;
}
#main-container {
    height:100%;
    overflow:hidden;
    border:1px red solid;
    position:relative;
}
#verticalDiv1{
    height:45px;
    width:100%;
    color: #EEE;
    background-color:#222;
}
#vertivalDiv2{
    width:100%;
    color: #222;
    background-color:#DDD;
    overflow-y:auto;
    position:absolute;
    top:45px;
    bottom:0;
}
#vertivalDiv2 .item{
    padding:15px;
    border:1px #333 solid;
}

Answer 2

The most flexible solution is to use CSS display:table - the benefit of this is it also works with unknown heights, if the height of your menu changed for example.

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>head: div 1, fixed height.</div>
    </div>
    <div class='row'>
        <div class='cell'>
            <div id="list">
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
                <div class="item">Some Dynamic Item</div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    table-layout:fixed;
    height:100%;
    width:100%;
    max-height:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
}
.row:first-of-type >.cell {
    color: #EEE;
    background-color:#222;
    height:45px; /* doesnt matter what this is- the layout will flexibly adjust */
}
.row:last-of-type >.cell {
    color: #222;
    background-color:#DDD;
}
#list {
    height:100%;
    overflow-y:auto;
}

Answer 3

With a known height, you can switch box-model and use absolute positionning and padding : DEMO

html, body {
    height:100%;
    margin:0;
    padding:0.25em;
    box-sizing:border-box;/* includes padding and borders in 100% height/width */
}
#main-container {
    padding-top:45px;
    box-sizing:border-box;/* includes padding and borders in 100% height/width */
    height:100%;
    overflow:hidden;
    border:1px red solid;
    position:relative;
}
#verticalDiv1 {
    height:45px;
    width:100%;
    color: #EEE;
    background-color:#222;
    position:absolute;/* it will stand in the padding area of its'parent */
    top:0;
    left:0;
    right:0;
}
#vertivalDiv2 {
    height:100%;
    color: #222;
    background-color:#DDD;
    overflow-y:auto;
}
#vertivalDiv2 .item {
    padding:15px;
    border:1px #333 solid;
}