Question

我正在编辑Wordpress主题的css（二十）

这是我的HTML结构：

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="main">
            <div id="filtri_di_ricerca"><img></div>
            <div id="container">
                <div id="content"></div>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</body>

这是我的CSS：

#main {
    position:relative;
    background:#fff;
    overflow:visible;
}

#filtri_di_ricerca img {
    position: absolute;
    top: -96px
}

#filtri_di_ricerca {
    position: absolute;
    top: 0;
    right: 20px;
    width: 250px;
    background-color: #E6E6E6;
}

我需要将#main div与#filtri_di_ricerca div重叠，但当我在overflow:visible上设置#main his height时会崩溃为零... 我仍然可以看到#container和#content，但#main的背景不再明显......我看到了#body的背景。

Answer 1

这是由div的高度计算方式引起的。这一切都取决于内容，如果没有固定。由于溢出：可见，内容不需要适合div。所以div的高度设置为零。

为div设置一些固定高度，它应该保持在那个高度。

Answer 2

＃filtri_di_ricerca的CSS位置是“绝对的”（因此离开自然流程）而#container没有任何内容。

尝试在#content中添加一些内容，并将#content的填充顶部设置为等于＃filtri_di_ricerca的高度

Answer 3

您需要清除#main div的浮动。

/* For modern browsers */
#main:before,
#main:after {
    content:"";
    display:table;
}
#main:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
#main {
    zoom:1;
}

溢出：可见崩溃div高度为零

3 个答案: