CODEWITHSUNDEEP
csshtmlpercentage
user263592
user263592

Reputation:

Nested Percentage Height Divs

I need a parent div to automatically resize when it's children do.

The two children have their heights based on percentages.

Code: http://jsfiddle.net/gBWUv/2/

If you add a height to the parent div, the children show up, but I'd like it to auto size to the children. It's because the children base their height on it's parent, and when the parent doesn't have a height, the children height is then 0. Is there a way to accomplish what I want without javascript? I have a javascript solution, but I hate coding more than is needed. Simple is best.

Here is the less elegant javascript that does exactly what I want: http://jsfiddle.net/gBWUv/14/

Upvotes: 0

Views: 1302

Answers (1)

FiveTools
FiveTools

Reputation: 6030

If the parent is zero and the children are 60% height of the parent they would also be zero. You could make the parent's height 100%? 

#parent {
    padding: 5% 0;
    background: #000;
    overflow: hidden;
    height: 100%;
}

Upvotes: 1

Related Questions