Why the div does not take the remaining space - html

Question

I have a div structure like this,
<div style="height:100%">
<div style="height:50px"></div>
<div id="auto" style="height:100%"></div>
</div>
But it seems like id="auto" is taking the height as its parent height and the parent overflows. Can just set css in a way that id=auto div take the remaining height of the parent ?
What I'm trying to do is to make the id=auto div to take the rest of the space on parent div resize.
here is the jsFiddle

Answer 1

That's because percentage value for height property is relative to the height of box's containing block. Therefore 100% means the entire height.
10.5 Content height: the 'height' property
Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's containing block. If the
height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'. A percentage height on the
root element is relative to the initial containing block.
One solution would be using a negative margin for the second <div> element to remove the srcollbar and then adding position: relative; to the first one to bring it back on the top of the second one.
In this case we should use padding on top of the second div to push its content down and also adding box-sizing: border-box in order to calculate the height of the box including padding borders:
Example Here
<div class="parent">
<div class="top"></div>
<div class="content"></div>
</div>
.parent { height:100%; }
.top {
height: 100px;
position: relative;
}
.content {
background-color: gold;
min-height: 100%;
margin-top: -100px; /* equals to the height of .top element */
padding-top: 100px; /* equals to the height of .top element */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
It's worth noting that this approach would work on IE8+.
Nowadays all major web browsers support box-sizing: border-box, however you use a spacer element instead of padding+box-sizing to push the content of .content down:
Example Here.
<div class="content">
<div class="spacer"></div>
<!-- content goes here -->.
</div>
.spacer, .top {
height: 100px;
}
This approach would work on IE 6/7+(*)
Alternatively, you could nest the .top element within the .content and drop the .parent in order to achieve the same result which is working on IE 6/7+(*).
Example Here.
<div class="content">
<div class="top"></div>
<div class="inner">
<!-- content goes here -->
</div>
</div>
(*) IE6+ by using height property, IE7+ by using min-height.

Answer 2

If you don't need to support IE8 or IE9, use CSS calc (http://caniuse.com/calc)
<div style="height:100%">
<div style="height:50px"></div>
<div id="auto" style="height:calc(100%-50px);"></div>
</div>
If you do need to support the older IE's, then I would suggest using display:table, display:table-cell, and display:table-row. There are a lot of little quirks to keep in mind when using the table displays, so stick with calc if possible.

Answer 3

You can achieve the desired result, if you can absolutely position the first child div (the one that is 100 pixels tall):
Demo: http://jsfiddle.net/rn2Xe/2/
<div style="height:100%; padding-top:100px; box-sizing: border-box; position: relative;">
<div style="height:100px; position: absolute; top: 0; width: 100%; box-sizing: border-box;"></div>
<div style="height:100%;"></div>
</div>
Note: Use classes for CSS. Your code could be much cleaner.

Answer 4

You might be able to solve this with css calc, but if you want good legacy support, use tables.