Inner div overflowing container

Question

I have two div s 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. ie 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;'>
        &nbsp;
    </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

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>

Answer 6

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 7

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 8

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