无法使内容位于固定导航栏的正下方答案

【问题标题】：Can't make content sit right below fixed navbar无法使内容位于固定导航栏的正下方
【发布时间】：2018-04-02 08:23:13
【问题描述】：

我正在尝试让我的 content-full 位于导航栏的正下方，但使用 padding 不会产生我想要的结果。

尝试将margin-top 应用于content-full，但它为我的导航栏增加了边距。

这是我的CodePen 这是截图正是我想要实现的目标。

玉：

nav
 .box
  #nav-icon1
   span
   span
   span
   span
 ul
  li
   a(href="#") Despre
  li
   a(href="#") FAQ
  li
   a(href="#") Numere
  li
   a(href="#") Colectiv
.content-full
 .content
  h1 test

SASS：

nav
 width: 100%
 position: fixed
 ul
  text-align: center
  background: #ffffff
  width: 68vw
  margin: 0 auto
  li
   display: inline-block
   width: 15vw
   a
    color: #a3a3a3
    display: block
    padding: 3vh 6vw
    text-decoration: none
.content-full
 padding: 10vh 0 0 0
 background: #a3a3a3
 .content
  width: 68vw
  min-height: 80vh
  background: blue
  margin: 0 auto

【问题讨论】：

我看到的唯一问题是您在 vh 中使用填充，这导致结果取决于窗口的高度。请改用 em 中的填充（因为这是计算导航栏高度的方式）。

标签： html css sass pug

【解决方案1】：

您看到的边距不是来自栏，而是来自内容。基本上，你有那个 position: fixed 将导航部分保持在顶部并“固定”。

如果您从内容中移除/降低填充，它们会粘在一起。

您可以尝试几种可能性：

使内边距稍微低一点，这样内容就会“粘住”
移除固定位置。
用 top:0 将导航从 position:fixed 改成 position: absolute 并移除填充（虽然这个非常棘手并且从长远来看是不可靠的）。

希望对你有帮助！

【讨论】：

【解决方案2】：

这也许是您正在寻找的：working link

nav
  width: 100%
  position: fixed
  min-height: 13vh
  ul
    text-align: center
    background: #ffffff
    width: 68vw
    min-height: 13vh
    margin: 0 auto
    li
      display: inline-block
      width: 15vw
      min-height: 13vh
      a
        color: #a3a3a3
        display: block
        padding: 3vh 6vw
        text-decoration: none
.content-full
  padding: 13vh 0 0 0
  background: #a3a3a3
  .content
    width: 68vw
    min-height: 87vh
    background: blue
    margin: 0 auto

这也是响应式的。

【讨论】：

【解决方案3】：

我不熟悉该技术，但我通过将 UL 宽度更改为 100%，将填充关闭 .content-full 并将其放在 .content 上，填充为 3em，从而获得了结果。但这似乎是一个快速解决方案，您可能会在未来遇到问题。祝你好运！

【讨论】：