I want to create a div which fits the browser window, but has content underneath which is visible when scrolling.
I don't want the div to be fixed, but I want it to be the same size as the browser window, and when re-sizing.
I'm sure the solution is very simple, but my mind has gone blank.
Below is what I'd like it to look like.
You can do it simply by setting height: 100%
But remember also about setting html, body to 100% and all parents of your div.
For example if you have:
<body> <div id="wrapper"> <div id="height100"></div> </div> <div id="content"></div> Your css should look like this:
html, body, #wrapper, #height100 { height: 100%; } 
<div class='viewport'> <ul> <li>Nav</li> <li>Nav</li> <li>Nav</li> <li>Nav</li> </ul> <div class='belowviewport'>Content</div> <div> body { margin: 0;} .viewport{ position:absolute; width:100%; height:100%; background: blue; } .belowviewport { position:absolute; width:100%; top:100%; height: 50px; } Here you go. I think this is what you are after: http://jsfiddle.net/NDrSm/
html, body { height: 100%; overflow: hidden; } div.container { height: 100%; overflow: auto; background: red; } 
html, body{ height : 100%; width : 100%; margin : 0 } #content{ height : 100%; width : 100%; } -1 to your question from me. Because this is not a new requirement. Google once before asking.
You can use a simple jQuery solution:
function calc() { var $window = $(window), $nav = $('nav'), $content = $('#content'); $content.height($window.height() - $nav.height()); } PS: You can actually define an min-height for the content div via css.
If you plan on using plain JavaScript, here is a solution:
var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0]; w.onload = calc(); w.onresize = calc(); function calc() { var nav = d.getElementById('nav'), content = d.getElementById('content'); content.style.height = (getWindowHeight() - nav.clientHeight) + 'px'; } function getWindowHeight() { return w.innerHeight|| e.clientHeight|| g.clientHeight; } 
