如何防止内容在 fixed header 后消失？

Question

我有一个固定的 header 与下面的内容重叠。

我尝试将 padding-top/margin-top 添加到 body、page-wrapper 和关于部分，但没有成功。我在 header 内使用了一个内部弹性框 div，并且我有一个隐藏的侧边栏，它在活动时具有 100% 的高度。我有一个主页，其中的主图高度为 100vh，padding-top 为 9rem，这似乎可行，但我不打算在此特定页面上使用主图。

HTML:

<body>
<div class="page-wrapper content">

<!-- HEADER -->
<header id="header">
  <div class="header-inner">
    <div class="header-col header-col-1">
      <div class="menu-trigger">
        <span class="menu-trigger-icon">
          <span class="menu-trigger-bar menu-trigger-bar-top"></span>
          <span class="menu-trigger-bar menu-trigger-bar-middle"></span>
          <span class="menu-trigger-bar menu-trigger-bar-bottom"></span>
        </span>
        <span class="menu-trigger-title">Menu</span>
      </div>
    </div>
    <div class="header-col header-col-2">
      <a class="logo" href="../index.html">
        <img src="" alt="">
      </a>
    </div>
    <div class="header-col header-col-3">
      <a class="click-to-call" href="tel:+44-1492-877-832">
        <i class="fas fa-phone"></i>
      </a>
      <a class="btn-book-now" href="">Book Now</a>
    </div>
  </div>
</header>
<!-- END / HEADER -->

<!-- SIDE NAV -->
<nav class="side-nav">
  <div class="side-nav-inner">
    <ul class="main-menu">
      <li>
        <a href="../index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="rooms.html">Rooms</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
      <li>
        <a href="">Book Now</a>
      </li>
    </ul>      
    <ul class="social-media">
      <li>
        <a href="">
          <i class="fab fa-facebook-f"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="fab fa-instagram"></i>
        </a>
      </li>
    </ul>
  </div>
</nav>
<!-- END / SIDE NAV -->

<main id="main">

  <section class="about">
    <div class="about-inner">
      <h1>About Us</h1>
      <span class="hr"></span>

CSS:

#header {
  background: #fdd400;
  -webkit-box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 99;
}

.header-inner {
  display: flex;
  flex-direction: row;
  height: 9rem;
  margin: 0 6%;
}

#main {
  background: #fff;
  width: 100%;
}

.about {
  background: #fff;
  width: 100%;
}

.about-inner {
  align-items: center;
  color: #2c2a29;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 6%;
  padding: 6rem 0;
  text-align: center;

Answer 1

#main 上的 padding-top 应该可以工作，除此之外，除非其他 CSS 某处有干扰，或者您无法预测 header 的高度.

Answer 2

我试图根据您粘贴的内容在代码沙箱中重新创建您的项目，以了解问题所在。我认为缺少一些样式，但似乎至少可以通过将主栏和侧边栏 div 包装在内容 div 中，然后将其向下移动来完成您想要实现的目标。像这样：

.content {
  position: absolute;
  top: 9rem;
  display: flex;
  width: 100%;
  overflow: scroll;
}

还有其他方法可以做到这一点，例如向下填充内容，但这也会产生一些副作用。

你可以看这里：

https://03jknqq7kw.codesandbox.io/

如何防止内容在 fixed header 后消失？

How to prevent content disappearing behind fixed header?

html

css

header

fixed

flexbox