Home/ Questions/Q 8371797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T14:14:54+00:00

I know that min-height: 100% will only work to take up a minimum of

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;.
    ​

    • 0