將絕對定位的div拉伸至文檔高度的100％，不含JavaScript

是否有任何簡潔的CSS方法可以將絕對定位的div元素拉伸到文檔底部（而不僅僅是瀏覽器的窗口）？將絕對定位的div拉伸至文檔高度的100％，不含JavaScript

實質上，div元素是一個模式彈出的背景，疊加應用程序的其餘部分。它應該覆蓋整個頁面 - 從上到下。然而，當該含量大於瀏覽器窗口越大，高度仍然只尺寸的元件的窗口高度（和內容流出的div）。

#background{ 
    background-color: green; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
} 
#content{ 
    color: white; 
    height: 200%; /* simulate a lot of content - just put a large value in here */ 
}

像這樣來使用：

<body> 
    <div id="background"> 
     <p id="content">a</p> 
    </div> 
</body>

例如，看http://jsfiddle.net/TuNSy/：綠色的背景延伸到父元素的可見部分，但是當你向下滾動，你會看到它實際上並沒有一直延伸到底部。

有一對夫婦的其他問題，但它們並不適用於我的問題：

CSS Div stretch 100% page height：只要伸展元素窗口高度，當含量都比較大不工作窗口。
Absolute position background 100% of page height：說明了問題，但沒有被接受的答案，原始海報最終使用JavaScript。

來源

2014-04-25 Aaa

問題是，你絕對定位的div比你的身體大，這就是爲什麼你有白色背景的問題。如果您只需添加overflow:auto;您#background，它應該處理溢出正確

Example

來源

2014-04-25 10:07:49 Pete

我猜我困惑的是，對於「溢出」屬性中的「自動」值看起來並不像它會完成我想（「如果溢出修剪，應加一個滾動條看到內容的其餘部分」），所以我沒有考慮它。我猜「應該」並不意味着瀏覽器實際上是這樣做的，他們可能根本就不顯示它。感謝您分享這種簡單且非侵入性的解決方案。 – Aaa

將絕對定位的div拉伸至文檔高度的100％，不含JavaScript

回答

相關問題