Set height 100% on absolute div
http://jsbin.com/ubalax/1/edit .You can see the results here
body {
position: relative;
float: left;
height: 3000px;
width: 100%;
}
body div {
position: absolute;
height: 100%;
width: 100%;
top:0;
left:0;
background-color: yellow;
}
Few answers have given a solution with height and width 100% but I recommend you to not use percentage in css, use top/bottom and left/right positionning.
This is a better approach that allow you to control margin.
Here is the code :
body {
position: relative;
height: 3000px;
}
body div {
top:0px;
bottom: 0px;
right: 0px;
left:0px;
background-color: yellow;
position: absolute;
}
try adding
position:relative
to your body styles. Whenever positioning anything absolutely, you need one of the parent or ancestor containers to be positioned relative (or anything other than the default position of static) as this will make the item be positioned absolute to the ancestor container that is positioned.
As you had no positioned elements, the css will not know what the div is absolutely positioned to and therefore will not know what to take 100% height of