Best IT Recipes

CSS: How to get this overlay to increase by 100% when scrolling?

Here is an example of the problem in question:

http://dev.madebysabotage.com/playground/overlay.html

You see that there is a gray overlay on the entire page, but if you scroll down, the content below the initial loaded page will not have an overlay.

I have a #overlay div and it seems that it does not support 100% height while scrolling, so I'm trying to figure out how to do this.

Here's the full source:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Overlay</title> <style type="text/css"> 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; } </style> </head> <body> <div id="overlay"></div> <header> <h1>Header</h1> </header> <section> <p>Here some sweet content</p> </section> <footer> <p>Here my footer</p> </footer> </body> </html>
+46
html css overlay
Jan 10 '11 at 15:33
source share
3 answers

position: fixed; on overlay.

+130
Jan 10 '11 at 15:36
source share

Change #overlay position:absolute to position:fixed

+6
Jan 10 '11 at 15:37
source share

This is because #overlay position: absolute refers to <html> and uses its dimensions, which is only the height of the viewport.

To make sure #overlay uses the size of the entire page, you can use position: relative; in <body> (but you will need to first remove min-height: 100% and height: 100% on <body> because this allows you to use the viewport size). Then #overlay will use the dimensions of the <body> and fill the entire page.

+1
Oct 14 '15 at 14:09
source share


More articles:


All Articles