Question

这是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

您想要使用大小调整框，请参阅此更新示例：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的填充。请务必查看浏览器兼容性（here），看它是否符合您的要求。

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框大小调整方法。

此外，您不必告诉DIV显示：block，因为这是它的默认显示属性。

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

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

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

3 个答案: