内容在顶部导航栏下消失答案

【问题标题】：Content disappearing under top nav bar内容在顶部导航栏下消失
【发布时间】：2020-10-22 14:26:00
【问题描述】：

所以我正在为一个学生项目创建这个网站，我在页面顶部的内容消失在我制作的固定导航栏下。

如何使内容区域从导航栏下方开始，而不是在导航栏下方结束？（暂时用<br>标签修复）

见下面的代码：

HTML 和 CSS（我正在处理的关于页面）

@font-face {
    font-family: "Roboto Light";
    src: url(font/Roboto-Light.ttf)
}

@font-face {
    font-family: "Roboto Regular";
    src: url(font/Roboto-Regular.ttf);
}

@font-face {
    font-family: "Roboto Medium Italic";
    src: url(font/Roboto-MediumItalic.ttf);
}

@media (max-width:1200px) {
    .indexsIMG img {
      display: none !important;
    }
 }

body {
    margin: 0 0;
        padding: 0 0;
        font-family: "Roboto Light";
        background-color: #3aafa9;
}

.topbox {
  font-size: 25px;
}

.topbox ul {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3aafa9;
    max-width: 100%;
}

.flex-navbar {
    display: flex;
    justify-content: center;
    margin-right: 15%;
    font-family: "Roboto Light";
}

.leftbox {
    margin-left: 5%;
    font-family: "Roboto Medium Italic";
    color: #171717;
}

.flex-navbar .active {
  color: #171717;
}

.topbox li a {
  display: block;
  color: #feffff;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
    font-size: 1em;
    float: left;
    text-align: center;
}

.flex-navbar li a:hover {
  color: #2b7a78;
}

.indexClickbox{
    background-color: #2b7a78;
}

.index{
    display: flex;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
}

.index h1{
    font-size: 8rem;
}

.index p{
    font-size: 2rem;
}

.indexOpphavIMG{
    font-size: 1rem;
}

.indexTXT{
    width: 50%;
    float: right;
    padding-left: 2%;
}

.index img{
    max-width: 100%;
    border-radius: 10px;
}

.indexIMG{
    width: 50%;
    float: left;
    padding-top: 7%;
}

.index button{
    width: auto;
    margin-left: 5%;
    background-color:#2b7a78;
    border: none;
    font-weight: 500;
    font-size: 3rem;
    color: #3aafa9;
    border-radius: 4px;
}
.index button:hover{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    cursor: pointer;
}

.index a:link{
    text-decoration: none;
}

.container {
    display: block;
    width: 0 auto;
    text-align: center;
}

.box {
    display: inline-block;
    text-align: center;
    padding: 0 5%;
}





.footer{
   
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
   <nav class="topbox">
      <ul>
          <li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
          <div class="flex-navbar">
          <li><a class="active" href="about.html">About</a></li>
          <li><a href="Schedule.html">Innovation Camps</a></li>
          <li><a href="contact.html">Contact</a></li>
      </div>
      </ul>
   </nav>
   <br>
   <br>
   <div class="container">

      <div class="box">
         <h1>About Inova</h1>
      </div>

   </div>
   


   <footer>
      <div class="footer">
          <p></p>
      </div>
   </footer>
   
</body>
</html>

【问题讨论】：

为清除导航栏的正文添加上边距或内边距

标签： html css

【解决方案1】：

通过在主体顶部添加填充，您可以将主要内容向下推，使其不低于固定导航栏：

@font-face {
  font-family: "Roboto Light";
  src: url(font/Roboto-Light.ttf)
}

@font-face {
  font-family: "Roboto Regular";
  src: url(font/Roboto-Regular.ttf);
}

@font-face {
  font-family: "Roboto Medium Italic";
  src: url(font/Roboto-MediumItalic.ttf);
}

@media (max-width:1200px) {
  .indexsIMG img {
    display: none !important;
  }
}

body {
  margin: 0 0;
  padding: 80px 0 0;
  font-family: "Roboto Light";
  background-color: #3aafa9;
}

.topbox {
  font-size: 25px;
}

.topbox ul {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3aafa9;
  max-width: 100%;
  background-color: rgba(0, 0, 0, .2);
}

.flex-navbar {
  display: flex;
  justify-content: center;
  margin-right: 15%;
  font-family: "Roboto Light";
}

.leftbox {
  margin-left: 5%;
  font-family: "Roboto Medium Italic";
  color: #171717;
}

.flex-navbar .active {
  color: #171717;
}

.topbox li a {
  display: block;
  color: #feffff;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 1em;
  float: left;
  text-align: center;
}

.flex-navbar li a:hover {
  color: #2b7a78;
}

.indexClickbox {
  background-color: #2b7a78;
}

.index {
  display: flex;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
}

.index h1 {
  font-size: 8rem;
}

.index p {
  font-size: 2rem;
}

.indexOpphavIMG {
  font-size: 1rem;
}

.indexTXT {
  width: 50%;
  float: right;
  padding-left: 2%;
}

.index img {
  max-width: 100%;
  border-radius: 10px;
}

.indexIMG {
  width: 50%;
  float: left;
  padding-top: 7%;
}

.index button {
  width: auto;
  margin-left: 5%;
  background-color: #2b7a78;
  border: none;
  font-weight: 500;
  font-size: 3rem;
  color: #3aafa9;
  border-radius: 4px;
}

.index button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.index a:link {
  text-decoration: none;
}

.container {
  display: block;
  width: 0 auto;
  text-align: center;
}

.box {
  display: inline-block;
  text-align: center;
  padding: 0 5%;
}

.footer {}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
  <nav class="topbox">
    <ul>
      <li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
      <div class="flex-navbar">
        <li><a class="active" href="about.html">About</a></li>
        <li><a href="Schedule.html">Innovation Camps</a></li>
        <li><a href="contact.html">Contact</a></li>
      </div>
    </ul>
  </nav>
  <div class="container">
    <div class="box">
       <h1>About Inova</h1>
    </div>
  </div>
  <footer>
    <div class="footer">
      <p></p>
    </div>
  </footer>
</body>
</html>

【讨论】：

【解决方案2】：

在我看来，最简单的方法是将position: fixed 替换为position: sticky，并将此属性移至.topbox，因为它是您想要保留在视口顶部的元素。

请记住，position: sticky 支持较小的浏览器，

body {
  margin: 0 0;
  padding: 0 0;
  font-family: "Roboto Light";
  background-color: #3aafa9;
}

.topbox {
  font-size: 25px;
  top: 0;
  position: sticky;
}

.topbox ul {      width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3aafa9;
  max-width: 100%;
}

.flex-navbar {
  display: flex;
  justify-content: center;
  margin-right: 15%;
  font-family: "Roboto Light";
}

.leftbox {
  margin-left: 5%;
  font-family: "Roboto Medium Italic";
  color: #171717;
}

.flex-navbar .active {
  color: #171717;
}

.topbox li a {
  display: block;
  color: #feffff;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 1em;
  float: left;
  text-align: center;
}

.flex-navbar li a:hover {
  color: #2b7a78;
}

.indexClickbox {
  background-color: #2b7a78;
}

.index {
  display: flex;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
}

.index h1 {
  font-size: 8rem;
}

.index p {
  font-size: 2rem;
}

.indexOpphavIMG {
  font-size: 1rem;
}

.indexTXT {
  width: 50%;
  float: right;
  padding-left: 2%;
}

.index img {
  max-width: 100%;
  border-radius: 10px;
}

.indexIMG {
  width: 50%;
  float: left;
  padding-top: 7%;
}

.index button {
  width: auto;
  margin-left: 5%;
  background-color: #2b7a78;
  border: none;
  font-weight: 500;
  font-size: 3rem;
  color: #3aafa9;
  border-radius: 4px;
}
.index button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.index a:link {
  text-decoration: none;
}

.container {
  display: block;
  width: 0 auto;
  text-align: center;
}

.box {
  display: inline-block;
  text-align: center;
  padding: 0 5%;
}

.footer {
}

<body>
  <nav class="topbox">
    <ul>
      <li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
      <div class="flex-navbar">
        <li><a class="active" href="about.html">About</a></li>
        <li><a href="Schedule.html">Innovation Camps</a></li>
        <li><a href="contact.html">Contact</a></li>
      </div>
    </ul>
  </nav>
  <div class="container">

    <div class="box">
      <h1>About Inova</h1>
    </div>

  </div>

  <footer>
    <div class="footer">
      <p></p>
    </div>
  </footer>

</body>

【讨论】：