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

【问题标题】：Right padding on absolutely positioned scrolling div绝对定位的滚动 div 上的右填充
【发布时间】：2011-08-14 17:17:22
【问题描述】：

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

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

此父级包含另一个 div，出于测试原因，该 div 设置为 2000px X 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>

所以，问题是：我怎样才能获得要应用的父级的正确填充？

【问题讨论】：

标签： css padding css-position

【解决方案1】：

这就是盒子模型的工作原理。内部子 div 比其父级大，因此它溢出父级的右/下边缘。如果您在父 div (border: 1px solid red) 周围加上边框，您会看到父 div 正确地占据了整个浏览器窗口。

我不知道你是如何让底部填充工作的，因为对我来说右/下都被 FF4 和 Chrome 上的孩子的灰色所覆盖。

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

【讨论】：

在 Chrome 11.0.696.77 上，底部填充正在工作，当您将父级滚动到底部时，20px 的白色就证明了这一点。这是没有显示的正确填充。您能否详细说明如何使用相对大小来实现这一点。

【解决方案2】：

从父 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>

【讨论】：