0

我有带有 div 和嵌套 div 的 HTML。嵌套 div 的宽度是容器 div 的一半，但高一倍。容器 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>

当我滚动时，整个区域的背景是半红半绿。为什么右下区域的背景是绿色的？如果我设置溢出不会发生这种情况：可见（然后它没有被填充）。

编辑：例如添加 JSFiddle。 http://jsfiddle.net/2Y52V/

4

1 回答 1

2

visible溢出意味着内容将“溢出”父级的边界。因此，如果定义了父级的实际大小，则不会改变。但是其他溢出策略将内容保持在父级的范围内，几乎就像“拉伸”父级一样。由于此属性，溢出通常用作clearfix解决方案（即overflow: hidden当有浮动的孩子时）。它有效地拉伸父对象以匹配，同时通过使用滚动条来保持它的物理大小。

于 2012-11-19T16:59:28.307 回答