絕對定位的DIV不會擴展到內容的高度

我有一個絕對定位的包裝div。是否可以擴展包裝div的高度以適應內容並顯示背景顏色。下面我使用的代碼：絕對定位的DIV不會擴展到內容的高度

CSS

html, body { 
width: 100%; 
height: 100%; 
margin: 0px; 
padding: 0px; 
border: 0px; 
} 

body { 
font-family: Arial,sans-serif; 
font-size: 2em; 
line-height: 1.5em; 
} 

#contentbody { 
position: absolute; 
left: 5px; 
right: 5px; 
top: 5px; 
bottom: 5px; 
background-color: Green; 
}

HTML

<div id="contentbody"> 
<div id="content"> 
    <div style="height: 1500px;">some large content</div> 
</div> 
</div>

來源

2010-09-02 Geert

我不我認爲你應該在#contentbody中設置bottom。通過設置top和bottom，您正在強制div的高度爲瀏覽器視圖端口的高度減去10（頂部+底部）。

來源

2010-09-02 09:32:26

也許你是對的，但我希望整個頁面（減去5個像素邊距）由背景顏色覆蓋，即使內容不是整頁。我怎麼能解決這個同時使用頂部和底部？ – Geert 2010-09-02 09:52:45

@Geert如何在所需顏色的body元素上定義邊框以及背景顏色？ – 2010-09-02 10:24:25

這也許是最好的解決方案，但它仍然不理想。你想要的是，DIV本身擴展到底部減5像素的邊際。但我想沒有解決方案，除了也許一些JavaScript黑客... – Geert 2010-09-09 11:43:57

嘗試在你的DIV

EDITED使用style = "overflow: scroll"：到remoe溢出：汽車

來源

2010-09-02 09:29:46

溢出是默認的自動所以我懷疑它會幫助他與 – corroded 2010-09-02 09:32:13

溢出地址：隱藏你的html,body選擇和和overflow：auto更改您的#contentbody DIV：

 html, body { 
     width: 100%; 
     height: 100%; 
     margin: 0px; 
     padding: 0px; 
     border: 0px; 

     overflow:hidden; /* overflow is hidden */ 
     } 

     body { 
     font-family: Arial,sans-serif; 
     font-size: 2em; 
     line-height: 1.5em; 
     } 

     #contentbody { 
     position: absolute; 
     left: 5px; 
     right: 5px; 
     top: 5px; 
     bottom: 5px; 
     background-color: Green; 

     overflow: auto; /* overflow is auto to allow scrolling */ 
     }

來源

2010-09-02 09:38:57 naikus

這適用於這種情況，但如果你有（我在我的真實腳本中）最小寬度和最小高度＃ contentbody div和瀏覽器屏幕太小，無法顯示最小寬度和最小高度值，因此用戶無法看到所有內容（因爲沒有主體滾動條） – Geert 2010-09-02 09:50:22

絕對定位的DIV不會擴展到內容的高度

回答

相關問題