Css 绝对定位滚动div上的右填充

我有一个绝对定位的父div，它的上、右、下和左属性都等于0px，因此它可以随浏览器调整大小。如果其内容超过文档宽度或高度，则会显示滚动条（在本应用程序中应如此）

这个父div还具有20px的上、右、下和左填充，因此它的内容周围总是有一个白色的边距

此父级包含另一个div，出于测试原因，该div被设置为2000px 2000px，并且具有与父级不同的背景颜色

现在，父母的顶部，底部和左侧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>

此divs width和height故意设置为高于文档/窗口宽度，以显示父滚动条。

---

所以，问题是：我如何才能获得正确的父项填充来应用？

这就是长方体模型的工作原理。内部子div比其父div大，因此溢出父div的右/下边缘。如果在父div周围放置边框（

边框：1px纯红

），您将看到父div正确地占据了整个浏览器窗口

我不知道你是如何得到底部填充工作，因为右/底部对我来说都是由孩子的FF4和铬灰色覆盖

---

如果希望子元素完全包含在父元素中而不溢出，则需要将其设置为相对大小，而不是绝对像素大小。

这就是长方体模型的工作方式。内部子div比其父div大，因此溢出父div的右/下边缘。如果在父div周围放置边框（

边框：1px纯红

），您将看到父div正确地占据了整个浏览器窗口

我不知道你是如何得到底部填充工作，因为右/底部对我来说都是由孩子的FF4和铬灰色覆盖

---

如果希望子元素完全包含在父元素中而不溢出，则需要将其设置为相对大小，而不是绝对像素大小。

删除

填充：20px，并添加
display:inline块；利润率：20px到内部分区。在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>


此divs width和height故意设置为高于文档/窗口宽度，以显示父滚动条。
移除
填充：20px，并添加
display:inline块；利润率：20px到内部分区。在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>


此divs width和height故意设置为高于文档/窗口宽度，以显示父滚动条。
在Chrome 11.0.696.77上，底部填充正在工作，当您将父对象滚动到底部时，显示为20像素的白色。没有显示的是正确的填充。你能解释一下如何使用相对尺寸来实现这一点吗？在Chrome 11.0.696.77上，底部填充是有效的，当你将父对象滚动到底部时，20像素的白色就证明了这一点。没有显示的是正确的填充。请您解释一下如何使用相对尺寸来实现这一点。