如何使外部div不受内部div的padding/margin影响而被挤出？

Question

这里是 jsfiddle 的示例

以下是 HTML 代码：

<div class="header">header</div>
    <div class="wrapper">
        <div class="left"><div class="content"></div></div>
        <div class="right">right</div>
    </div>

这是CSS代码：

.left{
position:absolute;
width:30%;
background:red;
left:0;
height:100%;
display:block;
padding:5px;
}
 .right{
overflow:hidden;
background:green;
position:absolute;
right:0;
width:70%;
height:100%;
}

html, body{
min-height:100%;
height:100%;
padding:0px;
margin:0px;
position:relative;
}

body {position:relative;}

.wrapper {
position:relative;
height:100%;
}

.header{
width:100%;
height:100px;
background:yellow;
display:none;
}

.left .content {
background:blue;
height:inherit;
width:100%;
}

你可以看到红色的div被蓝色的div挤出去了。我该如何防止这种情况？所有宽度和高度都基于百分比（%）。我唯一知道的方法是给红色的div一个固定的宽度。还有其他的方法可以使用百分比来解决这个问题吗？

- Long Nguyen

Answer 1

如果您想要使用box-sizing，请查看这个更新的示例：http://jsfiddle.net/Lca5c/1/

您的CSS将如下所示：

.left{
    position:absolute;
    width:30%;
    background:red;
    left:0;
    height:100%;
    display:block;
    padding:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

推迟显示的原因是因为您向div添加了填充。请确保检查浏览器兼容性（此处），以确认其是否符合您的要求。

- Prisoner

Answer 2

我知道这是一篇旧文章。最好的解决方案是添加：

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

关于你的元素在外部框中的位置。

你可以使用HTML中的div、textarea、input、select或任何其他元素来实现。

- Ivijan Stefan Stipić

---

我也在这里得到了帮助，已经有点明白了。无论如何还是谢谢！ - Long Nguyen

Answer 3

最简单的方法是从.left中删除填充并将填充添加到.content，同时还要从.content中删除宽度，以便其默认为自动宽度。

这样做将会得到您想要的正确行为，并且不会依赖于CSS3的box-sizing方法。

另外，您不必告诉DIV显示为块，因为这是其默认显示属性。

.left{
    position:absolute;
    width:30%;
    background:red;
    left:0;
    height:100%;
}

.left .content {
    background:blue;
    height:inherit;
    padding:5px;
}

- Billy Moat