Set content height to 100% of body height

Question

I am attempting to have my footer pushed to the bottom of the page, regardless of how little or how much content is on the page. Most of my pages push it to the bottom no problem, but ones with less content have a floating footer midway down the page. Even though I have

html,body{height:100%}

the content section does not gain height when

#content{height:100%}

is set. I have messed with

clear:both
overflow:hidden
#content:after{}

to no avail.

<html>
<body>
<header>
    <h1>Header Name</h1>
</header>

<section id="content">
        <p>Temp Text</p>
</section>

<section id="footer">
    <footer>
        <p>All rights reserved</p>
    </footer>
</section>
</body>
</html>

Edit: Using viewport-height (vh) units has let me extend the height of the content section, but is effected by the header above. So if my viewport is 900px with a 200px header, my footer is pushed 200px below the viewport.

You can find the answer in any one of these questions, most of which are duplicates [footer stick](http://stackoverflow.com/search?q=footer+stick) ... like yours. — Jayx, Aug 14 '16 at 17:56
Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Jayx, Aug 14 '16 at 17:57
@Jayx I have tried every similar post on this website and outside of it (including the one you linked) and have not found a suitable solution. — Chris, Aug 14 '16 at 18:09

Syam Pillai · Accepted Answer · 2016-08-14T18:08:47.267

0

CSS

#content{
  min-height: 100vh;
}

Here is the working Demo

this will always give a minimum height of full view-height regardless of the size of the content

EDIT (for making footer visible without scroll if content is small)

body{
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}
#content{
 flex: 1;
}

<section id="content">
        <p>Temp Text</p>
</section>

<section id="footer">
    <footer>
        <p>All rights reserved</p>
    </footer>
</section>

Here is the Editted Demo

If the content is small, the footer will be residing at the bottom of view-port. If the content is larger than the screen height, then footer will go down

edited Aug 14 '16 at 18:08

answered Aug 14 '16 at 17:43

Syam Pillai

4,967
2
26
42

Holy &*%$! that's the easiest, fix! I totally forgot about viewport units! – Chris Aug 14 '16 at 17:53
well, does it have to force the footer off the page? If there is no content on the bottom half of my page, I would like the footer to rest at the bottom of it, instead of having to scroll down to see it. – Chris Aug 14 '16 at 17:57
Okay with javascript? – Syam Pillai Aug 14 '16 at 18:02
I would prefer to avoid using it in this instance – Chris Aug 14 '16 at 18:04
@Chris Updated the answer. try with larger and smaller contents – Syam Pillai Aug 14 '16 at 18:09

score 0 · Answer 2 · answered Aug 14 '16 at 17:44

0

Set the footer absolute:

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

#footer {
  position:absolute;
  bottom:0;
}

Codepen: https://codepen.io/anon/pen/vKbREk

answered Aug 14 '16 at 17:44

I don't think this will work more content in the #content section. The footer will be floating over other elements as you have set it to position absolute. https://codepen.io/anon/pen/GqzxJO – David Jones Aug 14 '16 at 17:51
I had used this originally, but found that it hides elements on screen, particularly on mobile, I need it stuck to the bottom of the page. – Chris Aug 14 '16 at 17:52

Set content height to 100% of body height

2 Answers2