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

Question

Here's the jsfiddle example

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

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

它已经推出的原因是由于您添加填充去分。确保您检查浏览器兼容性（here）以查看它是否符合您的要求。

Answer 2

最简单的方法是从.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; 
} 

Answer 3

我知道这是一个旧帖子。最好的解决办法是在您的元素上添加

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

什么是在您的outher框。

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