如何确保 DIV 位于导航栏下方？答案

【问题标题】：How to ensure that a DIV comes below the navbar?如何确保 DIV 位于导航栏下方？
【发布时间】：2016-11-21 04:47:44
【问题描述】：

我正在使用 Materialize 创建一个导航栏，如下面的代码所示。之后，我渲染了一个 div 元素来保存我的应用程序，但它的最顶部被 NAV 元素隐藏了。

<div class="navbar-fixed">
  <nav class="nav-extended deep-purple">
    <div class="nav-wrapper">
      ...
      <ul id="nav-mobile" class="application right hide-on-med-and-down">
        <li>...</li>
        ...
        <li>...</li>
      </ul>
    </div>
  </nav>
</div>

<div id="application">Shazoo</div>

我当前的解决方法是简单地为名为 application 的 DIV 添加一个上边距，但这并不是我希望在印刷书籍中看到的最佳实践。我猜 Materialize 有一个我没有找到的特定 hack。网站上的文档似乎有点斯巴达式。

【问题讨论】：

你喜欢 div...不需要（或至少不应该需要）最外层的 div（class="navbar-fixed"）和内部的 div（@ 987654323@) - <nav> 本身就很好，其中的<ul> 也是如此。
@junkfoodjunkie 实际上，如果他希望导航栏保持固定在顶部或他希望 div 保持在任何位置，他确实需要 class="navbar-fixed"。
@junkfoodjunkie 我的印象是我需要最外层的 div 来保持类固定导航栏。没有它，它的行为似乎不正确。但你说得对，我是 div 的忠实粉丝。我喜欢潜水，因为它会产生分隔区域以便更好地控制。
如果他需要<div> 来代替navbar-fixed，那么他的CSS 有很大问题。他已经在<nav>-元素上有多个类，他应该能够将navbar-fixed-类移动到<nav>-元素本身，或者只是将navbar-fixed中的CSS添加到已经存在的类之一在<nav>-元素上。不过，我怀疑是一些愚蠢的框架 CSS（我猜是实现）。
@junkfoodjunkie 你在猜吗？检查标签，伙计，嘿嘿。拍得好，那里。实现不是我的决定。它是由另一个团队的负责人制作的，我在我们说话的时候开始学习它。因此，可能会出现一些愚蠢的问题。我更喜欢 Bootstrap，但我被拒绝了。 :)

标签： html css materialize

【解决方案1】：

为了避免添加边距或额外的 div，只需像这样在你的身体上添加顶部填充：

body {
    padding-top: ABCpx;
}

ABCpx 是固定导航栏的高度。

【讨论】：

导航栏的高度不固定。它在页面滚动方面是固定的，因此它始终保持在顶部。
@Konrad 是的，这也是我所说的固定的意思。上述解决方案确保导航栏下方不会隐藏任何内容，除非您开始向下滚动，这显然会将内容推离屏幕，无论是否存在固定位置的导航栏。
也许我没有很好地解释我的问题。从顶部偏移的数字是多少？导航栏可以是 50px 高，但是如果用户点击菜单，一个子菜单会添加到导航栏，然后是 80px 高。
好吧，我很困惑。因此，您希望在单击并展开子菜单后将内容下推吗？
是的，没错。内容的最上面一行应该刚好低于导航栏的底部边缘。如果它垂直增长，内容也应该被推送。

【解决方案2】：

如果导航栏使用“固定”定位，那么在我看来，我将 margin-top 添加到以下 div 将是正确的方法，或者添加填充。

【讨论】：

@Andrew Lyndem 如果您试图避免另一个 div 是正确的。但考虑到无论如何您都可能拥有包含您内容的 div，我猜它是一个和六个中的六个。
哦，我喜欢这种表达方式。在瑞典，我们说它是切割或切碎，呵呵。另外，如果该死的导航栏的高度波动怎么办？我有一些额外的子菜单可以显示。