Chris Chris - 3 months ago 8
CSS Question

Set content height to 100% of body height

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.

Answer

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