Question

有人可以解释为什么我会使用此代码获得垂直溢出吗？

<html>
    <body style="width:120px; height:120px; background-color:white;">
        <div style="padding:20px; background-color:blue;">
            <div style="width:100%; height:100%; background-color:white">
                <div style="padding:20px; background-color:green;">
                    <div style="width:100%; height:100%; background-color:white">
                    </div>
                </div>
            </div>
       </div>
    </body>
</html>

在Chrome 8中，它呈现如下：

alt text

Answer 1

我假设你希望它看起来像它一样，但绿色边框不突出蓝色边框，整个东西适合120px * 120px。

您没有在该代码中指定doctype，因此在不同的浏览器之间进行操作变得困难 - 某些浏览器将陷入“怪癖模式”。

使用您提供的代码，例如IE8将布局拉伸到窗口的宽度。

使其看起来一致的第一步是添加doctype，例如HTML5 doctype：

<!DOCTYPE html>

添加它使Chrome，IE8，Firefox，Opera之间看起来保持一致：

..但它也让它看起来不对，并且没有简单的方法来解决它，因为你试图混合基于%和px的测量（一个简单的解决方法就是使用它%或px）。使用height: 100%和padding: 20px会使元素太高，因为它的总高度将是填充加上父元素的高度（这就是“溢出”的原因）。

所以这里有一些新代码，它使用不同的方法提供您正在寻找的视觉效果：

Live Demo

<!DOCTYPE html>
<html>
<body style="width:120px; height:120px">
    <div style="background:blue; width:100%; height:100%; position:relative">
        <div style="background:green; position:absolute; top:20px; right:20px; bottom:20px; left:20px">
            <div style="background:white; position:absolute; top:20px; right:20px; bottom:20px; left:20px"></div>
        </div>
    </div>
</body>
</html>

Answer 2

您正在寻找的答案可以在此页面找到：

Iframe 100% height inside body with padding

简而言之，HTML5正在拯救之中。将此CSS添加到您的DIV中，问题就解决了：

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

Div在Chrome中填充了填充

2 个答案: