jquery - 什么会导致 HTML block 元素重叠？

Question

我启动了一个基于 Hot Towel 模板的 MVC4 SPA 网络应用程序。我开始清理我不想要的页眉和页脚内容。我删除的内容之一是从文件 app.css 中将 section.main 的 margin-top 设置为 80px。我真的不希望标题占用太多空间。但我对结果感到困惑。甚至在我删除它之前，根据我的 Chrome 浏览器窗口的宽度，我在标题中看到了一些奇怪的行为。现在我已经删除了它，我看到了类似的奇怪的“环绕”行为，它允许我的标题与我的内容重叠。

这是当页眉宽度为 979 像素时我的屏幕的样子:

由于我只是重新调整浏览器窗口的大小，在 980 像素时我超过了一个阈值，导致内容在标题下方向上滑动，如下所示:

什么会导致这种重叠？我在哪里可以尝试使 content section 严格保持在 header 下方？我没有看到任何应用于相关元素的 float 样式。

真正奇怪的是，尽管 header 大小变为 0，但它包含的 nav 元素仍然清晰可见，并且大小合适。容器怎么可能小于它的内容？

我在 app.css 中发现这个可能是相关的:

@media only screen and (max-width: 979px) {
    .page-splash-message {
        font-size: 150%;
    }

    .navbar-fixed-bottom {
        position: fixed;
    }

    footer span {
        padding: 10px 50px;
        font-size: 14px;
    }
}

Answer 1

我通过更改我的 nav.html 文件解决了这个问题:

<nav class="navbar navbar-fixed-top">
(etc...)
</nav>

到:

<nav class="navbar navbar-static-top">
(etc...)
</nav>