正確的填充絕對定位滾動div

我有一個絕對定位的父div誰的頂部，右側，底部和左側屬性都等於0px，以便它調整與瀏覽器。如果內容超過文檔寬度或高度，則會顯示滾動條（如同在應用程序中那樣）。正確的填充絕對定位滾動div

此父母div也有頂部，右側，底部和左側填充20像素，以便它的內容總是有白色邊距。

此父級包含另一個爲測試原因設置爲2000px X 2000px的div，並且具有與父級不同的背景色。

現在父母的頂部，底部和左側20px填充工作正常，但沒有出現正確的填充，這是混淆了我的地獄。所有現代瀏覽器都會發生這種特殊情況，所以它一定是我失蹤的嚴重問題。

<div id="parent" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 20px; overflow: auto; background-color: #FFFFFF;"> 

    <div id="child" style="width: 2000px; height: 2000px; background-color: #666666;"> 

     This divs width and height is deliberately set higher than the document/window width to cause the parents scrollbars to appear. 

    </div> 

</div>

所以，問題是：我怎樣才能得到正確的填充父母申請？

來源

2011-06-06 Steve

這是盒子模型的工作原理。內部子div大於其父級，因此它超出了父級的右側/底部邊緣。如果您在父div（border: 1px solid red）周圍放置邊框，您會看到父級正確佔據整個瀏覽器窗口。

我不知道你是如何讓底部填充工作的，因爲我的右/底都被FF4和Chrome上的孩子的灰色所掩蓋。

如果您希望子元素完全包含在父元素中而沒有溢出，您需要將其設置爲相對大小，而不是絕對像素大小。

來源

2011-06-06 15:52:00

在Chrome 11.0.696.77底部填充工作，由白20像素證明，當你滾動父底部。這是沒有顯示的正確填充。你能解釋一下如何使用相對大小來達到這個目的嗎？ – Steve 2011-06-06 16:01:26

從父div中刪除padding: 20px;，並將display:inline-block;margin:20px;添加到內部div。測試IE7 +，Firefox 5.0和Chrome。

以下是導致HTML：

<div id="parent" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: auto; background-color: #FFFFFF;"> 
    <div id="child" style="width: 2000px; height: 2000px; background-color: #666666; display:inline-block; margin:20px;"> 
     This divs width and height is deliberately set higher than the document/window width to cause the parents scrollbars to appear. 
    </div> 
</div>

來源

2011-08-14 09:17:22 Lafi

正確的填充絕對定位滾動div

回答

相關問題