【发布时间】：2018-07-18 12:54:34
【问题描述】：
所以我有一个问题，我似乎无法弄清楚。我有一个按钮，当它被点击时，导航栏应该一直延伸到屏幕底部并占据所有其他内容，或者换句话说，页面不应该是可滚动的。相反，导航栏占据了 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 轴上），然后单击页面左上角的菜单。您将看到它如何占据整个页面。
这是我现在的截图：
底部（不同颜色）是我还没有放在页面上的内容。
谢谢！
【问题讨论】：
标签： javascript html css