HTML and CSS Full Screen Layout Without Fuss
This is a quick guide to the modern method of getting a 100% high chunk of content without a lot of fuss. This technique also works for creating a 100% chunk of content, with more content being appended after the fold.
We’ll use this dummy HTML for the purposes of the example – it works just as well with headers, articles, sections, and nav elements (or whatever you like).
<div id="fixed-header">
</div>
<div id="fluid-banner">
</div>
<div id="fixed-thumbs">
</div>
<div id="further-content">
<p>Lorum ipsum whatever</p>
<p>Lorum ipsum whatever</p>
<p>Lorum ipsum whatever</p>
<p>Lorum ipsum whatever</p>
<p>Lorum ipsum whatever</p>
<p>Lorum ipsum whatever</p>
</div>
There are lots of solutions to this problem using traditional HTML and CSS rules, but they are all a big gnarly. There are tables, fixed position elements, relative position elements, additional elements… a lot of crazy stuff. In some cases, they only satisfy the 100% height requirement, but not the 100% height for this big, with more content to follow afterwards.
So here is the modern way to do it, with some really simple CSS.
body {
margin: 0;
}
#fixed-header {
background-color: Aqua;
height: 100px;
}
#fluid-banner {
background-color: blue;
height: 600px;
height: -webkit-calc(100vh - 200px);
height: calc(100vh - 200px);
}
#fixed-thumbs {
background-color: red;
height: 100px;
}
The really interesting part of this example is the “calc” property, which allows us to deduct our 100px header and 100px footer (so a total of 200px) from our 100% height. The fixed 600px height that precedes it will apply in browsers that don’t recognise the calc expression.
The un-prefixed “calc” works in Firefox 16+, Chrome 26+, Safari 7+, and Internet Explorer 9+. The prefixed version works back to Safari 6+ (a buggy version of calc) and Chrome 19+ (you can also use the -moz-calc version if you need to support Firefox-Ancient-Edition).