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