Inner div overflowing container - html

Question

I have two divs inside a div. I want the second div to fill up to the bottom of the container. I tried various height: 100%;, height: inherit;, height: auto;, etc. and different values for display css property, but didn't succeed. Please help.
Html:
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
Fiddle
Note: The second div has some rows and then a footer. I want the rows to be hidden as per the height. But the footer of the second div should be visible.
Another note:
The container is re-sizable (using JQuery Re-size). Hence I do not want to set the height of the second div. That will make it static. I want the second div to have dynamic height. i.e. Expanding yo the bottom of the container, always.

Answer 1

Try This
**overflow:hidden;**
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;overflow:hidden;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
Or Else you have to master div height auto and inner keep 100% some content inside.
<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: 100%; background-color: green;'>
</div>
</div>

Answer 2

when you do height: inherit;, the target container acquires the height of parent, that's why, your inner green div is taking height:100px and hence it is overshooting.
You should NOT DO overflow:hidden, as it will eat up your lower content.
What you should do is to either give percentage height to both your containers like
<div id="parentDiv" style='height: 100px; width: 100px;
background-color: black; border: 3px solid black;'>
<div id="topDiv" style='background-color: red;height:30%'>
<label>Test</label>
</div>
<div id="lowerDiv" style='height: 70%; background-color: green;'>
</div>
</div>
or use javascript to set height of your containers, something like
$(window).resize(function(){
var _heightT= $('#parentDiv').height();
$('#topDiv').height(_height*0.3);
$('#lowerDiv').height(_height*0.7);
})
I would suggest to give your Parent container a fixed height(deduced according to the window size, through javascript/jQuery), so that it is consistent across all browsers, and your inner containers, a percentage height, or atleast your top container a fixed height, and lower container a min-height and overflow-y:auto

Answer 3

How about something like this:
HTML:
<div id="con">
<div id="top">
<label>Test</label>
</div>
<div id="bottom">sdsdfsdfsdfs sdfs dfsdf sdf sd ff</div>
</div>
CSS:
#con {
height: 200px;
width: 100px;
background-color: black;
border: 3px solid black;
position: relative;
}
#top {
background-color: red;
position: absolute;
width: 100%;
}
#bottom {
top: 0px;
left: 0px;
background-color: #F5F5F5;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: green;
}
Take a look and see what you think. (you will have to push down inside to put text etc using padding-top: 20px;
DEMO HERE

Answer 4

Very simple:
<div style='overflow:hidden;height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>

Answer 5

You could use a percentage based height like you suggested, but the thing is when you set the bottom div to height:100%; that means 100% of the parent div's height which is 100px and it'll go outside the box, instead you could give the top div a 25% height and the bottom div 75% height, like this:
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='height:25%; background-color: red;'>
<label>Test</label>
</div>
<div style='height: 75%; background-color: green;'>
</div>
</div>
Fiddle

Answer 6

When you do height:inherit, it takes the height value from the parent div, which is the same as saying height:100%. But this causes the div to overflow because there is another inner-div child inside the main container div, which is taking a height equal to the default line-height of the label tag. You can try giving the inner div tags separate heights:
HTML:(same as your markup, just adding classes so you don't have to give inline styling)
<div class="p">
<div class="c1">
<label>Test</label>
</div>
<div class="c2"></div>
</div>
CSS:
.p {
height: 100px;
width: 100px;
background-color: black;
border: 3px solid black;
}
.c1 {
height:20%;
background-color: red;
}
.c2 {
height: 80%;
background-color: green;
}
DEMO

Answer 7

You can do this with display:table property in CSS. See more
Add display:table to the wrap div and display:table-row for the children.
Working Demo

Answer 8

UPDATE
According that we don't want to use overflow:hidden
Updated FIDDLE
<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Header</label>
</div>
<div style='height: 100%; background-color: green;'>
<label>Body</label>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
</div>
</div>