Question

I’m having the hardest time understanding how min-height is supposed to work. I figured that if I placed it over a wrapping div, that it would expand accordingly.

If your browser is large enough, there is a large space below the footer. I would like it if the footer was touching the bottom of the view port if there isn’t much content.

Otherwise, if there is a good amount of content, then the page should obviously scroll accordingly.

My HTML document is set up like this (for the sake of brevity, I’ve removed all the content and am just showing the nesting structure):

<div id="container">
        <div id="top" class="five-box-shadow full-ten-border">
            <div id="header" class="top-ten-radius">
                <div id="logo">
                </div>
                <div id="topbar">
                </div>
            </div>
        <div id="nav" class="bottom-ten-radius">
            <ul id="tabnav">
            </ul>
        </div>
        <div class="clearer"></div>
        </div>
        <div id="wrapper" class="full-ten-border five-box-shadow">
            <div id="content" class="full-ten-border">
                <div id="main"></div>
                <div id="secondary"></div>
                <div class="clearer"></div>
            </div>
            <div id="footer" class="bottom-ten-radius"></div>
        </div>
</div>

And the accompanying CSS that I thought would work:

#container {
    width: 880px;
    margin-left: auto;
    margin-right: auto;
    /*margin-top: 5px;*/
    min-height:100%;

}

Now, if I change #container to have height: 100%, it will stretch down but it will go too far and create scroll bars.

What can I do?

Answer 1

Typically the extra space is the result of padding/margins on the body and html tags (often browsers add it automatically).

html,body {height:100%;padding:0;margin:0}

Inner objects with height 100% + margins/padding can still push this out so you’ll have to be vigilant or use overflow:hidden somewhere.