web-dev-qa-db-ja.com

CSS：このオーバーレイをスクロールで100％拡張するにはどうすればよいですか？

問題の問題の例を次に示します。

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

ページ全体に灰色のオーバーレイがありますが、下にスクロールすると、最初に読み込まれたページの下のコンテンツにはオーバーレイがありません。

を持っています #overlay divで、スクロール中に100％の高さを維持していないようですので、それをどのように引き出すかを考えてみてください。

完全なソースは次のとおりです。

<!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's some sweet content</p>
  </section>
  <footer>
    <p>Here's my footer</p>
  </footer>
</body>
</html>
htmlcssoverlay
50
Shpigford

position: fixed;オーバーレイ。

154
benhowdle89

変化する #overlayposition:absoluteからposition:fixed

8
Bazzz

これは、#overlayposition: absoluteが<html>に対して相対的であり、そのサイズを使用しているためです。これはビューポートの高さのみです。

#overlayがページ全体のサイズを使用するようにするには、position: relative;で<body>を使用できます（ただし、ビューポートサイズを使用するため、min-height: 100%でheight: 100%および<body>を最初に削除する必要があります）。 #overlayは、<body>ディメンションを使用して、ページ全体を埋めます。

3
Thom