Hi all

I have a site which I show/hide a preloader over the top of the site at times on the site.

The issue I have is that if the page has a verticle scrollbar (i.e the page is quite long in content) my preloader overlay DIV only covers down to the bottom of the browser viewport, NOT the full length of the web page. So as I scroll down my page, most of the page is covered by my overlay but the bottom 25% (approx) of the web page is not covered at all.

How can fix this?

Here is a breakdown of my CSS:

Code:
html,  body { padding: 0; height: 100%; width: 100%; text-align: center; margin: 0; font-size: 14px;}
.wrap-content { width: 990px; margin: 0 auto; text-align: left; min-height:100%;}

#preloader {
	width: 100%;
	min-height:100%;
	text-align: center;
	position: absolute;
	z-index: 999998;
    margin: 0 auto;
    display: block;
	background-color: #fff;
	opacity: .7;
}
A snippet of the HTML is as follows:

HTML Code:
<body>
<div id="preloader"></div>
<div class="wrap-content">Main content loads here...</div>
</body>
Thanks for any advice.