Search code examples
csshtmllayoutalignment

HTML5/CSS Full Height Layout

Ok, this is my basic website structure:

<body>
    <div id="wrapper">
        <header><a href="/"> </a></header>
        <nav>
            <ul>
                <li><a href="...">...</a></li>
                <li><a href="...">...</a></li>
                <li><a href="...">...</a></li>
            </ul>
        </nav>
        <div id="content"></div>
        <footer><a href="/"> </a></footer>
    </div>
</body>

And here is my CSS basics:

html
{
    font-size: 100%;
    height: 100%;
    line-height: 1.4;
    overflow-y: scroll;
}

body
{
    background: #EEE url("../images/background.png") repeat-y center center fixed;
    color: #333;
    height: 100%;
    font: 1em 'Lato-Regular';
    margin: 0;
    padding: 0;
}

#wrapper
{
    height: 100%;
    margin: 0 auto;
    width: 960px;
}

#content
{
    min-height: 460px;
    height: auto !important;
    height: 460px;
    margin: 20px 0;
}

This is what I would like to achieve (without using javascript hacks, preferably):

  1. Header and footer height are determined by their content size.
  2. div#content should have a minimum height of X pixels, but otherwise expand as much as it wants to include the content of the page.
  3. div#wrapper should stretch to fill the whole viewport height with the div#content being the flexible part that stretch to fill.
  4. I'm trying to target as many browsers as possible but I'm not really into full cross-browser compatibility. Let's old browsers die.

I'm getting a weird result:

enter image description here

As you can see, the wrapper is not stretching to fill the browser viewport and, by consequence, the footer (the black bar on the bottom) is floating in the middle of the page. Can you help me please?

Solution

  • display:flex; is the easy nowdays (besides it looks a lot like this question Fill remaining vertical space with CSS using display:flex )

    html
{
    font-size: 100%;
    height: 100%;
    line-height: 1.4;
    overflow-y: scroll;
}

body
{
    background: #EEE url("../images/background.png") repeat-y center center fixed;
    color: #333;
    height: 100%;
    font: 1em 'Lato-Regular';
    margin: 0;
    padding: 0;
}

#wrapper
{
    height: 100%;
    margin: 0 auto;
    width: 960px;
  display:flex;
  flex-direction:column
}

#content
{
   flex:1;
    margin: 20px 0;
/* overflow:auto; add this and it will show a scrollbar when needed and won't push footer down */
}
footer,header {
  background:lightgray;
  /* no need to set any height, a min-height eventually */
        <div id="wrapper">
        <header><a href="/">header</a></header>
        <nav>
            <ul>
                <li><a href="...">...</a></li>
                <li><a href="...">...</a></li>
                <li><a href="...">...</a></li>
            </ul>
        </nav>
        <div id="content"></div>
        <footer><a href="/">footer</a></footer>
    </div>