导航栏高度更改时，内容下推页面

Question

所以我有一个问题，我似乎无法弄清楚。我有一个按钮，单击该按钮时，导航栏应一直延伸到屏幕底部并占用所有其他内容，换句话说，该页面不应滚动。相反，导航栏占据了屏幕的100％，但是当我滚动时，我仍然可以看到下面的内容，并且不知道为什么。到目前为止，这是我的代码...

<div class="wrapper">
  <div class="top-nav">
    <nav id="nav">
      <div class="nav-bar">
        <ul>
          <li><button onclick="expandNav()"><i class="fal fa-bars"></i></button></li>
          <li><a href="#"><i class="fab fa-connectdevelop"></i></a></li>
          <li><a href="#">Ban</a></li>
          <li><a href="#">Warn</a></li>
          <li><a href="#">Gift</a></li>
          <li><a href="#">Records</a></li>
          <li><a href="#">Moderator</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Edit</a></li>
          <li><a href="#"><i class="fas fa-user-circle"></i></a></li>
          <li><a href="#"><i class="fal fa-sign-out-alt"></i></a></li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="main-content">

  </div>
</div>
<script>
  function expandNav() {
    document.getElementById("nav").style.height = "100vh";
  }
</script>

如您所见，单击按钮时，导航栏的高度设置为100vh，以占据整个页面。

这是我的CSS代码...

body {
  margin: 0;
  padding: 0;

  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  height: 100%;
}

.top-nav .nav-bar {
  width: 82%;
  transition: 0.5s;
}

/* START -- Disabling resizing affects*/



/* END -- Disabling resizing affets*/

.top-nav nav {
  display: flex;
  justify-content: center;

  height: 44px;
  background: #040406;
  transition: 0.6s;
}

.top-nav nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;

  height: 44px;

  padding: 0;
  margin: 0;

  list-style-type: none;
}

.top-nav nav a {
  display: inline;

  color: white;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.top-nav ul li:first-child {
  display: none;
}

.top-nav ul li:nth-child(2) i {
  font-size: 22px;
}

.top-nav ul li:nth-child(2):hover a {
  color: dodgerblue;
}

.top-nav ul li:hover a {
  color: #939393;
}

.top-navul li:nth-child(2):hover a {
  color: dodgerblue;
}

.top-nav ul li:nth-child(9) i, ul li:last-child i {
  font-size: 18px;
}

.main-content {
  height: calc(100vh - 44px);
  width: 100%;
  background:   #131218;
}

@media (max-width: 767px) {
  /* START -- Top Navigation Bar */
  .top-nav .nav-bar {
    width: 100%;
  }

  .top-nav ul li:first-child{
    display: flex;
  }

  .top-nav button i {
    transition: 0.3s;
  }

  .top-nav ul li:hover button i {
    color: #939393;
  }

  .top-nav ul button {
    border: none;
    background: none;
    transition: 0.3s;
  }

  .top-nav ul li:first-child button {
    font-size: 18px;
    color: white;
  }

  .top-nav ul li:nth-child(2) i {
    color: dodgerblue;
  }

  .top-nav ul li:nth-child(3), .top-nav ul li:nth-child(4), .top-nav ul li:nth-child(5), .top-nav ul li:nth-child(6), .top-nav ul li:nth-child(7), .top-nav ul li:nth-child(8), .top-nav ul li:nth-child(9), .top-nav ul li:nth-child(10) {
    display: none;
  }
  /* END -- Top Navigation Bar */
}

总结：当我将导航栏设置为100vh时，它占据了整个页面，但是当我滚动其下方的所有内容时，我却不希望这样做，我只是想要它占用了整个页面。如果您不明白我的要求，可以访问Apple网站，调整窗口大小（在x轴上），然后单击页面左上方的菜单。您将看到它如何占据整个页面。

这是我现在拥有的屏幕截图：

底部（不同的颜色）是我尚未在页面上放置的内容。

谢谢！

Answer 1

在导航栏上应用100vh高度时，在正文上添加overflow: hidden

document.getElementsByTagName("body")[0].style.overflow = "hidden";

function expandNav() {
  if (document.getElementsByTagName("body")[0].style.overflow === "hidden") {
    document.getElementById("nav").style.height = "";
    document.getElementsByTagName("body")[0].style.overflow = "";
  } else {
    document.getElementById("nav").style.height = "100vh";
    document.getElementsByTagName("body")[0].style.overflow = "hidden";
  }

}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  height: 100%;
}

.top-nav .nav-bar {
  width: 82%;
  transition: 0.5s;
}


/* START -- Disabling resizing affects*/


/* END -- Disabling resizing affets*/

.top-nav nav {
  display: flex;
  justify-content: center;
  height: 44px;
  background: #040406;
  transition: 0.6s;
}

.top-nav nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 44px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.top-nav nav a {
  display: inline;
  color: white;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.top-nav ul li:first-child {
  display: none;
}

.top-nav ul li:nth-child(2) i {
  font-size: 22px;
}

.top-nav ul li:nth-child(2):hover a {
  color: dodgerblue;
}

.top-nav ul li:hover a {
  color: #939393;
}

.top-navul li:nth-child(2):hover a {
  color: dodgerblue;
}

.top-nav ul li:nth-child(9) i,
ul li:last-child i {
  font-size: 18px;
}

.main-content {
  height: calc(100vh - 44px);
  width: 100%;
  background: #131218;
}

@media (max-width: 767px) {
  /* START -- Top Navigation Bar */
  .top-nav .nav-bar {
    width: 100%;
  }
  .top-nav ul li:first-child {
    display: flex;
  }
  .top-nav button i {
    transition: 0.3s;
  }
  .top-nav ul li:hover button i {
    color: #939393;
  }
  .top-nav ul button {
    border: none;
    background: none;
    transition: 0.3s;
  }
  .top-nav ul li:first-child button {
    font-size: 18px;
    color: white;
  }
  .top-nav ul li:nth-child(2) i {
    color: dodgerblue;
  }
  .top-nav ul li:nth-child(3),
  .top-nav ul li:nth-child(4),
  .top-nav ul li:nth-child(5),
  .top-nav ul li:nth-child(6),
  .top-nav ul li:nth-child(7),
  .top-nav ul li:nth-child(8),
  .top-nav ul li:nth-child(9),
  .top-nav ul li:nth-child(10) {
    display: none;
  }
  /* END -- Top Navigation Bar */
}

<script src="https://use.fontawesome.com/eed659c9d4.js"></script>

<div class="wrapper">
  <div class="top-nav">
    <nav id="nav">
      <div class="nav-bar">
        <ul>
          <li><button onclick="expandNav()"><i class="fa fa-bars"></i></button></li>
          <li><a href="#"><i class="fab fa-connectdevelop"></i></a></li>
          <li><a href="#">Ban</a></li>
          <li><a href="#">Warn</a></li>
          <li><a href="#">Gift</a></li>
          <li><a href="#">Records</a></li>
          <li><a href="#">Moderator</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Edit</a></li>
          <li><a href="#"><i class="fas fa-user-circle"></i></a></li>
          <li><a href="#"><i class="fal fa-sign-out-alt"></i></a></li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="main-content">

  </div>
</div>
<script>
</script>

第二个片段，以解决评论中提出的问题

function expandNav() {
  if (document.getElementsByTagName("body")[0].classList.contains("openNavbar")) {
    document.getElementsByTagName("body")[0].classList.remove("openNavbar");
  } else {
    document.getElementsByTagName("body")[0].classList.add("openNavbar");
  }

}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  height: 100%;
}

.top-nav .nav-bar {
  width: 82%;
  transition: 0.5s;
}


/* START -- Disabling resizing affects*/


/* END -- Disabling resizing affets*/

.top-nav nav {
  display: flex;
  justify-content: center;
  height: 44px;
  background: #040406;
  transition: 0.6s;
}

.top-nav nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 44px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.top-nav nav a {
  display: inline;
  color: white;
  font-weight: normal;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.top-nav ul li:first-child {
  display: none;
}

.top-nav ul li:nth-child(2) i {
  font-size: 22px;
}

.top-nav ul li:nth-child(2):hover a {
  color: dodgerblue;
}

.top-nav ul li:hover a {
  color: #939393;
}

.top-navul li:nth-child(2):hover a {
  color: dodgerblue;
}

.top-nav ul li:nth-child(9) i,
ul li:last-child i {
  font-size: 18px;
}

.main-content {
  height: calc(100vh - 44px);
  width: 100%;
  background: #131218;
}

@media (max-width: 767px) {
  /* START -- Top Navigation Bar */
  .top-nav .nav-bar {
    width: 100%;
  }
  .top-nav ul li:first-child {
    display: flex;
  }
  .top-nav button i {
    transition: 0.3s;
  }
  .top-nav ul li:hover button i {
    color: #939393;
  }
  .top-nav ul button {
    border: none;
    background: none;
    transition: 0.3s;
  }
  .top-nav ul li:first-child button {
    font-size: 18px;
    color: white;
  }
  .top-nav ul li:nth-child(2) i {
    color: dodgerblue;
  }
  .top-nav ul li:nth-child(3),
  .top-nav ul li:nth-child(4),
  .top-nav ul li:nth-child(5),
  .top-nav ul li:nth-child(6),
  .top-nav ul li:nth-child(7),
  .top-nav ul li:nth-child(8),
  .top-nav ul li:nth-child(9),
  .top-nav ul li:nth-child(10) {
    display: none;
  }
  /* END -- Top Navigation Bar */
}

@media (max-width: 768px) {
  body.openNavbar {
    overflow: hidden;
  }
  body.openNavbar #nav {
    height: 100vh;
  }
}

<script src="https://use.fontawesome.com/eed659c9d4.js"></script>

<div class="wrapper">
  <div class="top-nav">
    <nav id="nav">
      <div class="nav-bar">
        <ul>
          <li><button onclick="expandNav()"><i class="fa fa-bars"></i></button></li>
          <li><a href="#"><i class="fab fa-connectdevelop"></i></a></li>
          <li><a href="#">Ban</a></li>
          <li><a href="#">Warn</a></li>
          <li><a href="#">Gift</a></li>
          <li><a href="#">Records</a></li>
          <li><a href="#">Moderator</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Edit</a></li>
          <li><a href="#"><i class="fas fa-user-circle"></i></a></li>
          <li><a href="#"><i class="fal fa-sign-out-alt"></i></a></li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="main-content">

  </div>
</div>
<script>
</script>