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

HtmlCssOverlay

Html Problem Overview

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>

Html Solutions

Solution 1 - Html

position: fixed; on the overlay.

Solution 2 - Html

Change #overlay position:absolute to position:fixed

Solution 3 - Html

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.

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Overlay Solutions

Previous Solution:

Abstract property with public getter, define private setter in concrete class possible?

C#PropertiesAbstract ClassSetterGetter

Next Solution:

Should one use dashes or underscores when naming a gem with more than one word?

RubyNaming Conventions

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionShpigfordView Question on Stackoverflow
Solution 1 - Htmlbenhowdle89View Answer on Stackoverflow
Solution 2 - HtmlBazzzView Answer on Stackoverflow
Solution 3 - HtmlThomView Answer on Stackoverflow