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.