Question

我有一个带有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>

当我滚动时，整个区域的背景为半红色，半绿色。为什么右下区域有绿色背景？如果我设置overflow：visible（当时没有填充），就不会发生这种情况。

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

Answer 1

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

溢出：滚动和背景颜色（HTML）

1 个答案: