0

divとネストされたdivを持つHTMLがあります。ネストされたdivの幅はコンテナdivの半分ですが、高さは2倍です。コンテナdivは、オーバーフローするとスクロールします。

html, body, form
{
    height:100%;
    margin:0px;
    padding: 0px; 
}    

div#outer
{
    height:200px;
    width: 500px;
    overflow:scroll;
    background-color:Green;    
}

div#inner
{
    height:400px;
    width: 250px;
    background-color:Red;
}

<body>
<form id="form1" runat="server">
    <div id="outer">
        <div id="inner"></div>
    </div>
</form>

スクロールすると、領域全体の背景が半分赤、半分緑になります。右下の領域の背景が緑色になっているのはなぜですか？これは、overflow：visibleを設定した場合には発生しません（その場合は埋められません）。

編集：たとえばJSFiddleを追加します。 http://jsfiddle.net/2Y52V/

4

1 に答える 1

2

visibleオーバーフローとは、コンテンツが親の境界を「こぼれる」ことを意味します。したがって、親の実際のサイズは、定義されている場合、変更されません。しかし、他のオーバーフロー戦略は、ほとんど親を「伸ばす」ように、コンテンツを親の範囲内に保ちます。オーバーフローは、このプロパティのために、クリアフィックスソリューションとして（つまり、子がフロートしている場合に）よく使用されます。overflow: hiddenスクロールバーを使用して親の物理的なサイズを維持しながら、親を効果的に引き伸ばして一致させます。

于 2012-11-19T16:59:28.307 に答える