Question

这是我的网址：http://www.chs07reunion.info（正在进行的工作）

如果您点击链接，您应该看到我在说什么。我有一个外部容器设置为：

#headerandbg {
    background-color: #4A514D;
    width: 960px;
    background-image: url(Headfonts2.jpg);
    height: 1280px;
    **margin-top: 0;**
    margin-right: auto;
    margin-left: auto;
}

内部容器位于：

#corkbg {
    width: 880px;
    background-color: #C90;
    **margin-top: 140px;**
    margin-right: 40px;
    margin-left: 40px;
    background-image: url(cork5.jpg);
    height: 1100px;
}

页面html包含#headerandbg，后跟#corkbg：

<body>
    <div id="headerandbg">
        <div id="corkbg">
        </div>
    </div>
</body>

在我的浏览器上，两个容器的顶部都有一个间隙，顶部边缘高度取决于内部容器（目前设置为140px）。如果我拿出内部，外部容器会回到顶部（我想要的地方）。有什么建议吗？

Answer 1

尝试使用填充。当没有“离开”的内容时，边距应该会崩溃。

#headerandbg {
    padding-top: 140px;
}

#corkbg {
    margin-top: 0; /* or remove this */
}

在Firefox 4中为我工作。

Answer 2

将overflow: auto;添加到#headerandbg：

#headerandbg {
    overflow: auto;

    background-color: #4A514D;
    width: 960px;
    background-image: url(Headfonts2.jpg);
    height: 1280px;
    **margin-top: 0;**
    margin-right: auto;
    margin-left: auto;

苦苦挣扎：外部容器正在向上边缘向下捕捉一个内部容器。为什么？

2 个答案: