Question

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

我尝试将padding-top / margin-top添加到正文，页面包装程序和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;

Answer 1

除其他事项外，#Attempt 2 import numpy as np import random import itertools a = [0,1,2,3,4,5,6,7,8,9] w =2 mylist = np.array(a) indices_list = np.arange(mylist.size) def n2choice(n1): prob_wts = [0 if i+(n1-w) == n1 else 1/(abs(i+(n1-w)-n1))**(1.) for i in np.arange(mylist[(n1 - w)%len(mylist):(n1+w+1)%len(mylist)].size)] prob_wts = np.array(prob_wts)/sum(prob_wts) #for i in np.arange(mylist[max(n1-w,0):n1+w+1].size): #print(i, i+(n1-w)) print(prob_wts) print(sum(prob_wts)) print(indices_list[(n1 - w)%len(mylist):(n1+w+1)%len(mylist)]) n2 = random.choices(indices_list[(n1 - w)%len(mylist):(n1+w+1)%len(mylist)], weights=prob_wts,k=1) #print(prob_wts[max(n1-w,0):n1+w+1]) n2_c = (n2[0], mylist[n2[0]]) return np.array(n2_c) n2choice(1)上的padding-top应该可以工作，除非其他CSS干扰了，或者您无法预测标头的高度。

Answer 2

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

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

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

您可以在这里看看：

https://03jknqq7kw.codesandbox.io/

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

2 个答案: