CSS：如何獲得這個覆蓋，以滾動延長100％？

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

你看有在整個頁面的灰色覆蓋，但如果你向下滾動，初始加載頁面下面的內容不具有覆蓋。

我有一個#overlay股利，它似乎並沒有保持滾動期間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>

來源

2011-01-10 Shpigford

感謝您的支持！對於其他人閱讀，這個問題在上面的鏈接中是固定的。重新創建它使用Firebug或類似的刪除`位置：固定;`從覆蓋ID :) – RyanM 2012-11-07 20:05:18

3年後，我有同樣的問題:) +1的問題 – Ljubisa 2014-04-04 02:24:18

131

position: fixed;上的覆蓋。

來源

2011-01-10 15:36:29 benhowdle89

變化#overlayposition:absolute到position:fixed

來源

2011-01-10 15:37:32 Bazzz

這是因爲#overlayposition: absolute相對於<html>和使用它的尺寸，這是唯一的視高度。

爲了確保#overlay使用整個頁面的尺寸，你可以使用在<body>position: relative;（但你將需要刪除的min-height: 100%和height: 100%在<body>第一，因爲這使得它使用視大小）。然後，#overlay將使用<body>尺寸並填充整個頁面。

來源

2015-10-14 14:09:57 Thom

CSS：如何獲得這個覆蓋，以滾動延長100％？

回答

相關問題