内側のdiv親のdivの100％の幅が境界を超えています

Question

これは通常の問題かもしれませんが、私はこのウェブサイトや他のソリューションで解決策を見つけられませんでした。

私はこのフィドル製： http://jsfiddle.net/xzdead/jxsYx/3/

インナーDIV「をdiv_mainPanel」100％の幅である、しかし、あなたは右下隅を見れば、それは親のdivの上にあります。

私はhaverを削除しようとしました：内側のdivとwidthの問題を解決しましたが、高さではありません。とにかく、なぜ私は100％wodthに設定し、マージン - パディングが0pxに設定されている場合、それは親divから成長しますか？事前に

おかげ

Answer 1

サイズの計算には罫線が含まれます。あなたの内側divは、親の高さ/幅の100％を取得するので、500x300になりますが、境界線の周りに2pxを追加するので、実際に502x302であり、右/

Answer 2

thatsのborder属性は100％...パディング値と同じの上に行くので。

thatsなぜその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として計算されています。幅については、除算（ブロックレベルの要素）がコンテナの幅を自動的に拡大して100％の幅よりも優れているため（埋め込み、枠線、および余白を考慮する）、width: 100%を削除してください。

親コンテナで常に正確な高さを使用している場合は、子供の正確な高さを498ピクセルにして、子供の全高が500ピクセルになるようにしてください。

Answer 5

この問題を解決するためのより良い方法が用意されました：あなたのCSSのためのサイジングborder-boxを使用します。

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

今100%は、子要素のサイズを設定するには、はるかに自然な方法になります。