css - Div溢出并在Chrome中填充

谁能解释为什么我会在这段代码中出现垂直溢出？

<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中，其呈现方式如下：

最佳答案

我假设您希望它看起来像它一样，但是绿色边框没有突出到蓝色边框的外面，整个东西都放在120px * 120px内部。

您没有在该代码中指定doctype，因此很难使它们在不同的浏览器之间正常工作-有些浏览器将进入“怪癖模式”。

使用您提供的代码，例如IE8可以将布局扩展到窗口的宽度。

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

<!DOCTYPE html>

此外，它在Chrome，IE8，Firefox，Opera之间看起来也是一致的：

..但是它也使它看起来很错误，并且没有简单的方法来修复它，因为您正在尝试混合基于%和px的测量值（一个简单的解决方法是仅使用%或）。使用px和height: 100%会使元素过高，因为它的总高度将是填充值加上父元素的高度（这就是“溢出”的原因）。

因此，这里有一些新代码，使用其他方法可以提供您正在寻找的视觉效果：

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>

关于css - Div溢出并在Chrome中填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4738336/