Force nested divs to have min-height of 100%?

I know that min-height: 100% will only work to take up a minimum of 100% of its parent element's height if the parent element has some numeric value for height, but what if I have a few nested divs and I want them all to have a min-height of 100%? I tried min-height:inherit but that didn't work either? I know I can probably solve this problem with JavaScript by simply checking the browser height value on document load and then assigning that to the min-height property of my nested divs, but I'd like to know if it would be possible to solve this with just css?

Edit: I should also mention that I need my outer most div and my nested divs all to have a min-height of 100% such that they take up at least the height of the browser, but expand if needed.

min-height: inherit; should work: http://jsfiddle.net/ugxbs/

EDIT

As for percentage values and the expected behavior, there is no logic behind nested min-height. What you should do is to use the height property for all parents, then add min-height to the inner most DIV.

F.ex:

<html>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

CSS:

html, body, .outer { height: 100% }
.inner { min-height: 100%; }

http://jsfiddle.net/4PsdT/

This way, you are telling the browser to set all outer elements from the top (HTML) to a height of 100%. This will make these elements stretch across the browser height. Then just add a min-height to the inner most element that contains the content.

Setting a height doesn’t mean that it’s children’s excessive content will fall out, unless you add overflow:hidden;.

I can make it work with the property height but not min-height.

http://jsfiddle.net/zDVqm/

来源：https://stackoverflow.com/questions/11916531/force-nested-divs-to-have-min-height-of-100

标签

css

layout

position

height