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

Question

我试图让我的 content-full 位于导航栏的正下方，但是使用 padding 并没有产生我想要的结果。

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

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

Jade :

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

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

如果您移除/降低内容的内边距，它们会粘在一起。

您可以尝试几种可能性:

1. 将内边距调低一点，这样内容就会“粘”起来
2. 移除固定位置。
3. 将导航从 position: fixed 修改为 position: absolute 和 top:0 并移除 padding(虽然这个非常棘手从长远来看不可靠)。

希望对您有所帮助!