內DIV父DIV的100％寬度超過界限

Question

我知道這可能是一個平常的問題，但我還沒有發現在這個網站，也沒有其他的解決方案。

我做了這個小提琴： http://jsfiddle.net/xzdead/jxsYx/3/

內蒙古格「div_mainPanel」是100％的寬度，但如果你看看右下角一切都結束的div父。

我哈弗試圖消除寬度：100至內的div和寬度問題解決，但不高度。無論如何，如果我已經設置爲100％並且margin-padding設置爲0px，爲什麼它會從父級div中增長？

在此先感謝

Answer 1

國界計數容量計算。你的內部div可以獲得父元素的高度/寬度的100％，所以它變成500x300，但是在邊界附近增加了2px，所以它真的是502x302，並且在右邊/底邊上的父邊界上泄漏。

Answer 2

那是因爲border屬性越過100％......一樣的填充值。

所以它2px的了。

Answer 3

這是正確的行爲。內部div設置爲父級的100％寬度，但這不包括其邊框，因此它是100％+ 2px。

爲了防止內部DIV父的邊界之外顯示，添加box-sizing: border-box給家長和孩子都：

#div_mainContainer { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: #f8f8f8; 
 
    border: 1px solid red; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    box-sizing: border-box; 
 
} 
 

 
#div_mainPanel { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    border: 1px solid yellow; 
 
    box-sizing: border-box; 
 
}

<div id="div_mainContainer"> 
 
    <div id="div_mainPanel"></div> 
 
</div>

Answer 4

border屬性是不是在寬度計算的框中。所以你的盒子實際上被計算爲100％+ 2px的邊界。對於寬度，只是刪除width: 100%，因爲一個部門（塊級元素）已經將擴大，以填補自動容器的寬度，超過100％的寬度可以做到（因爲它會考慮填充，邊框和邊距）更好。

如果你總是使用父容器，爲什麼不使用的498px一個精確的高度上孩子，這將計算出的500像素的孩子總高度上一個精確的高度。

Answer 5

現在有解決這個問題的一個更好的方法：使用border-box大小爲你的CSS：

http://paulirish.com/2012/box-sizing-border-box-ftw/

現在100%將是一個更自然的方式來設置子元素的大小。