如何保持外部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中的任何其他元素來做到這一點。