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

Question

我试图让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

Answer 1

您看到的保证金不是来自酒吧，而是来自内容。 基本上，你有位置：固定，这使导航部分保持在顶部并“固定”。

如果从内容中删除/缩小填充，它们将粘在一起。

您可以尝试一些可能性：

1. 使填充稍微低一点，以便内容“坚持”
2. 删除已修复的位置。
3. 将导航从位置修复到位置：绝对， top：0 并删除填充（虽然这个很难处理从长远来看是不可靠的。）

希望它有所帮助！

Answer 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

这也是敏感的。

Answer 3

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