CODEWITHSUNDEEP
htmlcss
Noah Goodrich
Noah Goodrich

Reputation: 227

100% of content, not of browser height using CSS

I have a min-height 100% div that contains all the content of my website:

#SiteWrap { min-height: 100%; width: 100%; }

The above div contains everything - the header, content and footer.

What I need to do is overlay an absolute positioned div on top (with a semi-transparent .png background) which basically sits above the entire site, effectively 'fading it out' slightly.

I can't seem to get the absolute div to fit to 100% of the site content. It just spans 100% of the browser height. When you scroll down the bottom section of content below the height of the browser are not spanned by the div.

I have tried this div which I put inside the SiteWrap div but it won't work:

#LoginPopup-Background { position: absolute; width: 100%; min-height: 100%; height: 100%; z-index: 1100; background-color: #F39C11; }

(The background colour is for testing purposes).

Any ideas?

Upvotes: 1

Views: 185

Answers (1)

Florian Rachor
Florian Rachor

Reputation: 1574

Use position: fixed instead of position: absolute. The login will still not be 100% size of the document but it will always cover the content even when you scroll.

Also for the IE you should always set top: 0; left: 0 to prevent some strange layout errors.

Upvotes: 3

Related Questions