CSS: How to get this overlay to extend 100% with scrolling?

Question

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;
}

<div id="overlay"></div>
<header>
  <h1>Header</h1>
</header>
<section>
  <p>Here's some sweet content</p>
</section>
<footer>
  <p>Here's my footer</p>
</footer>

Thanks for this! For anyone else reading, the problem is fixed at the link above. To recreate it use Firebug or similar to remove `position:fixed;` from the overlay id :) — RyanM, Nov 07 '12 at 20:05

score 177 · Accepted Answer · edited Oct 30 '15 at 09:49

177

position: fixed; on the overlay.

edited Oct 30 '15 at 09:49

Vivek

11,938
19
92
127

answered Jan 10 '11 at 15:36

benhowdle89

36,900
69
202
331

You note that fixed positions is not supported in IE6. But considering the fact you are using rgba values, I guess you do not care about IE at all. :p – Dan Jan 10 '11 at 15:58
1

who does? ;) (we all should really) ha – benhowdle89 Jan 10 '11 at 15:59
Okay, now what about tablets and mobile devices? – BorisOkunskiy May 30 '12 at 10:32
8yrs later - Add "overflow: hidden;" to body when overlay is opened to avoid double scroll bar in some browsers. – Bogdan Oct 18 '19 at 06:02
What if the overlay is not relative to the body, but for some child element which has scrolling? – Robin Wieruch Nov 25 '21 at 09:28

score 10 · Answer 2 · edited Feb 02 '17 at 18:08

10

Change #overlay position:absolute to position:fixed

edited Feb 02 '17 at 18:08

BadHorsie

14,135
30
117
191

answered Jan 10 '11 at 15:37

Bazzz

26,427
12
52
69

score 5 · Answer 3 · answered Oct 14 '15 at 14:09

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.

CSS: How to get this overlay to extend 100% with scrolling?

3 Answers3

Linked