Question

我的网站具有以下基本结构。此站点的背景应为白色，图像只有一次，但它只是继承了CSS中html{ }声明的颜色。元素下面应该具有背景的所有元素都是透明的，即使添加背景（在Firebug中检查），它似乎低于html{ }中定义的背景。

自从我从overflow: none;删除声明#content-container之后，才发生这种情况。我需要删除它，因为站点发生的更改需要导航菜单有下拉列表，因此下面的容器必须允许溢出。

是否有特定的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>

Answer 1

我猜测#content-left和#content-right元素是浮动的？在这种情况下，overflow: none上的#content-container导致元素自我清除。如果没有这个，元素将没有高度，因为其中的所有元素都是浮动的，因此无法计算容器的高度。

如果您必须使用overflow: visible，则解决方法是将div放置在包含clear: both的包含元素的末尾：

<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; }

溢出可见时CSS背景消失

1 个答案: