Absolute DIV height 100%
Well it looks to me that your element with all the content is floated. If it is then its not going to expand the body unless it is cleared.
[update]
new approach
This should do it ..
using display:table
on your 2 elements should do it (it works in my tests). (but you wil have to assign width values now..
However i am not sure if you should define nested elements as table-cell etc.. which would become unmanageable..
Have a try though ..
old non working version
Have you tried on
#gradient
and #holes
the following ?
#gradient {
height:auto!important;
height:100%;
min-height:100%;
..
..
}
#holes{
height:auto!important;
height:100%;
min-height:100%;
..
..
}
Note that the height property specified in percentage is calculated with the respect to the containing block ..which doesn't necessary have to be the immediate ancestor – "The containing block for a positioned box is established by the nearest positioned ancestor or, if none exists, the initial containing block". I bet this is what's going on in the questioner's case as there is no positioned ancestor (the one with position:
set either to relative
or absolute
).
So the "containing block" resolves to the initial containing block which corresponds with the dimensions of the viewport (window). Setting position:relative
to body
will take the body
's height into account and stretch the absolutely positioned content along body
completely.
More on containing block here.
I was having the same issue. Fixed it by changing position: absolute to position: fixed.