固定导航栏，不会让我滚动

Question

所以我有这个我正在开发的网站，它看起来像这样：当我向下滚动页面时，我希望顶部导航栏保持固定。但是，如果我向页面添加更多内容，我似乎无法滚动？如果有人愿意帮助我，我将不胜感激。提前致谢。

这是我的 CSS & HTML

html, body {
    margin: 0;
    padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.wrapper {
  width: 1100px;
  max-width: 90%;
  margin: 0 auto;
}

#top_header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  background-color: #26ABF5;
  height: 70px;
  width: 100%;
  vertical-align: middle;
}

#logo_top {
  display: inline-block;
  float: left;
  width: 53px;
  padding-top: 8px;
}

#main_nav {
  display: inline-block;
  font-size: 13px;
  line-height: 70px;
  padding-left: 150px;
}

#main_nav a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  margin-left: 6em;
}

.button {
  float: right;
  justify-content: center;
  display: flex;
  width: 101px;
  margin-top: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-radius: 2px;
  background-color: #fff;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #26abf5;
  font-size: 13px;
  font-weight: 600;
}

.banner {
  height: 400px;
  background-image: url('../images/Banner_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.banner_header {
  margin-top: 0;
  display: flex;
  padding-top: 89px;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 33px;
}

.banner_paragraph {
  display: flex;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: -15px;
}

.priser_button {
  display: flex;
  width: 207px;
  justify-content: center;
  border: 3px solid #fff;
  -webkit-transition: background-color 400ms ease;
  transition: background-color 400ms ease;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 9px 0 9px 0;
  text-decoration: none;
}

.priser_button:hover {
  background-color: #26abf5;
}

.container {
  display: flex;
  padding-top: 84px;
  justify-content: center;
}

.logo {
  width: 53px;
  padding-top: 5px;
}

.underbanner_header {
  display: flex;
  margin-top: 30px;
  justify-content: start;
  font-family: 'Open Sans', sans-serif;
}

<body>
    <header id="top_header">
      <div class="wrapper">
        <a href="index.html"><img id="logo_top" draggable="false" src="images/logo1.png"></a>
          <nav id="main_nav">
            <a href="index.html">FORSIDE</a>
            <a href="#">HVAD TILBYDER VI?</a>
            <a href="#">PRISER</a>
            <a href="#">OM OS</a>
          </nav>
            <a class="button" href="#">LOG IND</a>
      </div>
        <div class="banner">
          <h2 class="banner_header">DANMARKS FEDESTE FITNESS CENTER</h2>
          <p class="banner_paragraph">BLIV EN DEL AF TEAMET I DAG</p>
          <div class="container w-container"><a class="priser_button w-button" href="#">SE VORES PRISER</a>
        </div>
      </div>
      <div class="underbanner">
      <div class="wrapper">
        <h3 class="underbanner_header">NYT CENTER I SØNDERBORG</h3>
        <p class="content_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
      </div>
    </div>
  </body>

Answer 1

您似乎没有关闭 <header> 标签。

固定导航栏，不会让我滚动

Fixed nav bar, won't let me scroll

html

css

scroll

fixed

navbar