当Overflow为可见时，CSS背景消失

Question

当Overflow为可见时，CSS背景消失

3

我有一个网站，其基本结构如下。该网站应该具有白色背景，并出现一次图像，但实际上它只是从CSS中的html{ }声明继承颜色。在应该具有背景的元素下面的所有元素都是透明的，即使背景已经被添加（在Firebug中检查），似乎这是在html{ }中定义的背景之下。

自从我从#content-container中删除了overflow: none;声明以来，这种情况才发生，而在此之前它是正常的。然而，由于网站正在发生变化，需要导航菜单具有下拉菜单，因此下面的容器必须允许溢出，所以我需要删除它。

这是否是由于特定的CSS原因导致的？或者还需要提供其他任何信息以便有人能够帮助？谢谢。

<div id="main-container">

    <div id="header-container">
        <div id="header-top">
            {Code}
        </div>

        <div id="header-middle">
            {Code}
        </div>

        <div id="header-nav">
            {Code}        
        </div>
    </div>

    <div id="content-container">
        <div id="content-left" class="index">  
            {Code}
        </div>

        <div id="content-right">
            {Code}
        </div>
    </div>

    <div id="footer-container">
        {Code}
    </div>

</div>

- David Gard

1

我猜测您正在使用浮动#content-left和#content-right元素，但没有清除它们（这就是overflow: hidden的作用）。如果您无法使用overflow: hidden或添加清除元素，请尝试使用overflow: auto。 - My Head Hurts

1

太好了，谢谢。我以为我清除得很正确，但似乎不是这样。感谢您的帮助。 - David Gard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

我猜测#content-left和#content-right元素是浮动的？如果是这样，那么在#content-container上设置的overflow: none会导致元素自动清除。如果不进行此操作，则该元素将没有高度，因为其中的所有元素都是浮动的，因此无法计算容器的高度。

如果你必须使用overflow: visible，则解决方法是在包含元素的末尾放置一个带有clear: both属性的div：

<div id="content-container">
    <div id="content-left" class="index">  
        {Code}
    </div>

    <div id="content-right">
        {Code}
    </div>

    <div class="clear"></div>
</div>

.clear { clear: both; }