私はこれを長い間見てきましたが、ここで何が起こっているのかわかりません。なぜこれがこのように機能するのか、誰かが私にヒントを与えることができますか?Firefox、Chrome、IEはすべて同じ結果になります。
この例では、コンテナの幅は1000pxに設定されており、内部divがコンテナをオーバーフローしています:http: //jsfiddle.net/S65Hv/
この例では、コンテナの幅を300pxに変更しただけです。その結果、内部アイテムの高さはコンテナ内にあり、オーバーフローは発生しません。http: //jsfiddle.net/5EwTG/
コード:
<style>
.container {
position: absolute;
top: 10px;
left: 10px;
width: 1000px;
height: 300px;
border: 1px solid grey;
}
.item {
width: 48%;
height: 48%;
float: left;
position: relative;
margin: 1%;
}
.innerItem {
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<div class="container">
<div class="item">
<div class="innerItem">
</div>
</div>
<div class="item">
<div class="innerItem">
</div>
</div>
<div class="item">
<div class="innerItem">
</div>
</div>
<div class="item">
<div class="innerItem">
</div>
</div>
</div>
内部divの高さはパーセンテージで表され、マージンを含めて合計が100%になります。
私の知る限り、300pxの高さの100%は常に同じであり、幅に依存しないはずです。
これは仕様によるものですか?もしそうなら、なぜですか?