如何防止内容消失在固定标题后面？答案

【问题标题】：How to prevent content disappearing behind fixed header?如何防止内容消失在固定标题后面？
【发布时间】：2019-08-16 04:52:20
【问题描述】：

我有一个固定的标题，它与下面的内容重叠。

我尝试将 padding-top/margin-top 添加到 body、page-wrapper 和 about 部分，但没有成功。我在标题内使用了一个内部 flex box div，并且我有一个隐藏的侧边栏，它在活动时具有 100% 的高度。我有一个主页，其中有一个高度为 100vh 和 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;

【问题讨论】：

欢迎来到 Stack Overflow。请看：how to create a Minimal, Complete, and Verifiable example.

标签： html css flexbox header fixed

【解决方案1】：

#main 上的 padding-top 应该可以工作，除其他外，除非其他地方的 CSS 受到干扰，或者您无法预测标题的高度。

【讨论】：

【解决方案2】：

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

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

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

你可以看看这里：

https://03jknqq7kw.codesandbox.io/

【讨论】：