Question

我有一个绝对定位的父div，其top，right，bottom和left属性都等于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>

所以，问题是：如何才能正确填充父级的填充？

Answer 1

这就是盒子模型的工作原理。内部子div大于其父级，因此它溢出父级的右/下边缘。如果在父div（border: 1px solid red）周围放置边框，您将看到父级正确占用整个浏览器窗口。

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

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

Answer 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>

在绝对定位的滚动div上正确填充

2 个答案: