如何确保DIV低于导航栏？

Question

我使用Materialise创建一个导航栏，如下面的代码所示。之后，我渲染一个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>

我目前的解决方法是简单地为名为应用程序的DIV添加一个上边距，但这并不是我想在印刷书中看到的最佳做法。我猜测还有一个特定的物化黑客，我还没找到。文档似乎在网站上有点Spartan。

Answer 1

为了避免添加边距或额外的div，只需在您的身体上添加顶部填充，如下所示：

body {
    padding-top: ABCpx;
}

ABCpx 是固定导航栏的高度。

Answer 2

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