css - 如何保持外部 div 不会被内部 div 的填充/边距推出？

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 一个固定的宽度。我还有其他方法可以用 % 完成吗？

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 的填充。确保检查浏览器兼容性（此处）以查看它是否符合您的要求。

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;

在你的元素上，你的外盒里有什么。

您可以使用 div、textarea、input、select 或 HTML 中的任何其他元素来做到这一点。

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;
}