Full screen page with 100% body height - html

Question

Is there any way to make a page with header, sticky footer and the body should always fit 100% of the screen height - header and footer, with only HTML and CSS. See the image for more.
­

Answer 1

You can use an approach which allows you to keep the body at 100% height and have a sticky footer as well using a modern sticky footer approach:
http://mystrd.at/modern-clean-css-sticky-footer/
Steps to achieve this:
1. box-sizing:border-box;
2. html { position: relative; height: 100%;}
3. body{ text-align: center; min-height: 100%; margin: 0; overflow: hidden;}
4. container: absolute positioned with a top of the header height.
5. footer: absolute positioned with left and bottom:0;
Look at this demo:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
position: relative;
height: 100%;
}
body {
text-align:center;
min-height: 100%;
margin:0;
overflow:hidden;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 50px; /* Height of Footer */
width: 100%;
}
header {
height: 50px; /* Height of header */
line-height:50px; /* vertical align the title*/
width: 100%;
background-color:lightgreen;
}
.container{
background-color: darkgreen;
height: 100%;
position: absolute;
top: 50px; /* Height of header */
left: 0;
bottom: 0;
width: 100%;
right: 0;
}
footer{
background-color:yellow;
line-height:50px; /* vertical align the title*/
}
<header>HEADER</header>
<div class="container"></div>
<footer>FOOTER</footer>
Inspecting you will see that the body will always be 100% height and the footer will be sticky at the bottom.
Ps. Added box-sizing: border-box just because it's a good practice but it's not necessary for this approach.

Answer 2

If you're using a container in the body after the header then you should set your css like this:
.container {width: 100%; height: 100%; content: "" ;}

Answer 3

Add this to your css
html, body {
height: 100%;
}
And make a div, that has the content you called body, then give it 100% in height.
For an example
<header>..</header>
<section id="content"> <--- HAS 100% IN HEIGHT.
....content
</section>
<footer>..</footer>
Like this:
#content {
width: 960px; <-- definable.
height: 100%;
}