HTML5/CSS Full Height Layout

Question

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):

Header and footer height are determined by their content size.
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.
div#wrapper should stretch to fill the whole viewport height with the div#content being the flexible part that stretch to fill.
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:

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?

Could you create a jsfiddle? With the code you supplied I cannot recreate it. — Chris G, Jan 24 '16 at 15:01
That's because you don't have any content... Believe me , when you fill it with 300 lines of content , it will be okay. That content properties , min-height , height and again height are useless bro... height by default is auto , due to the content it fills the container. — Nasco.Chachev, Jan 24 '16 at 15:20
You can set the background of your `body` to match your `footer`, so that you don't see that lighter background under your footer. Then move the lighter background to your `#content`. — Rafi, Jan 24 '16 at 15:20

score 5 · Accepted Answer · edited May 23 '17 at 10:27

5

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>

edited May 23 '17 at 10:27

Community

1
1

answered Jan 24 '16 at 15:21

G-Cyrillus

101,410
14
105
129

Yeah but flexbox layout modul is not supported in IE8 and IE9 :( – Nasco.Chachev Jan 24 '16 at 15:36
@Nasco.Chachev read #4 of the requirements (*last sentence in particular*) of the OP ;) – Gabriele Petrioli Jan 24 '16 at 15:45
@GabyakaG.Petrioli Yes man I've read it . I am on the same opinion , lets old browsers die :D but , I`m just saying that flexbox is not fully supported yet.. no hate tho :) – Nasco.Chachev Jan 24 '16 at 16:01
@Nasco.Chachev for older browser, the display:table layout properties can help you to achieve this almost as easily, but there will be no option to keep footer freezed down bottom, it will be pushed down as content grows over screen size; flex can help manange really easily grid layout : the op design stranded with flex http://codepen.io/anon/pen/gPvBze – G-Cyrillus Jan 24 '16 at 16:15

score 0 · Answer 2 · answered Jan 24 '16 at 15:20

There's a unit for height and width that comes with css3 that many people don't really use or know about. vw and vh, which stands for viewport width and viewport height. You should use them. If you want one of you div's to take full height then set height: 100vh if it's an image and you don't want it to be squeezed vertically put width: auto. I use vw and vh a real lot. vw the most, even font sizes I'll use font-size: 2vw or something similar, 1.6 or another decimal, this way no matter what width the device goes to, it will always be 2 viewport widths (2vw). Play around with it and you will find the right dimensions. Set footer and Nav at a set vh or vw and they will stay proportionate to whatever device you're on.

HTML5/CSS Full Height Layout

2 Answers2