Setting 100% height on an absolutely positioned element when the content expands past the window size

Question

So after reading Stack Overflow and the web, I\'ve gathered that there are two main tricks to achieving 100% height:

1. Set height:100% on both the HTML and BODY

Answer 1

I would use javascript to assign the height and width equal to document's height and window's width respectively; I've modified your jsfiddle to demonstrate it here:

http://jsfiddle.net/9FEne/1/

Answer 2

You can use jQuery to achieve this trick

var h = $(window).height();
$('#yourdiv').height(h);

Answer 3

Sorry, I missed the real question before and thought you wanted the window filled. If the issue is that the contents are longer than the window then what you need is to add position:relative to the body. http://jsfiddle.net/9FEne/7/

What is happening is that when you absolutely position something it positions (and sizes) relative to the nearest positioned element. If you don't tell it to position to the body then it will position to the window.