Here is an example of the issue in question:
http://dev.madebysabotage.com/playground/overlay.html
You see there is a gray overlay over the entire page, but if you scroll down, the content below the initial loaded page doesn't have the overlay.
I have an #overlay div and it seems it doesn't keep the 100% height during scrolling, so trying to figure out how to pull that off.
Here's the full source:
html { height: 100%; min-height: 100%; } body { height: 100%; min-height: 100%; font-family: Georgia, sans-serif; } #overlay { background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 10000; } header, section, footer { width: 800px; margin: 0 auto 20px auto; padding: 20px; background: #ff0; } section { min-height: 1500px; }
Header
Here's some sweet content
position:fixed; from the overlay id :)
position: fixed; on the overlay.
Change #overlay position:absolute to position:fixed
This happens because the #overlay position: absolute is relative to the <html> and using it's dimensions, which is only the viewport height.
To make sure that the #overlay uses the dimensions of whole page, you could use position: relative; on the <body> (but you will need to remove the min-height: 100% and height: 100% on the <body> first because this makes it use the viewport size). The #overlay will then use the <body> dimensions and fill the entire page.
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- How can I change an element's class with JavaScript?
- How do I give text or an image a transparent background using CSS?
- How to make a div 100% height of the browser window
- How do I style a <select> dropdown with only CSS?
- How to overlay one div over another div
- How can I transition height: 0; to height: auto; using CSS?
- How do CSS triangles work?
