CSS: How to get this overlay to extend 100% with scrolling?_问答_开发者

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

开发者 https://www.devze.com 2023-02-03 05:51 出处：网络

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 开

相关专题：css overlay

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>

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.