导航栏棒顶与身体 100%答案

【问题标题】：Navbar stick-top with body 100%导航栏棒顶与身体 100%
【发布时间】：2020-08-21 01:18:56
【问题描述】：

我正在构建一个 React 应用程序，并且有一个粘性顶部的引导程序 nabavr。我已将主体设置为height: 100%，当我这样做时，导航栏不再停留。我不能将 vh 用于我的一个页面，因为它会弄乱移动设备上的内容，所以我想坚持百分比。有没有办法做到这一点？我已经包含了使 body 100% 的代码。

html,
body,
#root {
  height: 100%;
  max-height: 100%;
}

【问题讨论】：

请贴出所有相关代码

标签： css reactjs bootstrap-4 height nav

【解决方案1】：

您可以使用位置 CSS 属性 (https://developer.mozilla.org/en-US/docs/Web/CSS/position)。

如有必要，您还可以使用 z-index 属性 (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)

例子：

HTML

<div id="root">
  <nav>
    <div>item</div>
    <div>item</div>
    <!-- ... -->
    <div>item</div>
    <div>item</div>
  </nav>
  <main>
    <!-- ... -->
  </main>
</div>

CSS

#root {
    /* necessary */
    position: relative;
    height: 100vh;
}

nav {
    /* necessary */
    position: sticky; // you can also use 'fixed' value
    top: 0;
    left: 0;
    right: 0;

    /* not necessary */
    background-color: red;
    height: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

main {
  /* necessary */
  overflow: hidden auto;
  /* margin-top: 2rem; if you have used fixed value */

  /* not necessary */
  height: 200%;
  background-color: green;
}

【讨论】：

如果您可以提供一个工作代码示例来说明您提供的链接，它可能对 OP 很有用。