时间戳

首页 > 解决方案 > 如何使垂直导航栏占据页面高度的 100%？

html - 如何使垂直导航栏占据页面高度的 100%？

问题描述

首先，是的，以前有人问过这个问题，但答案对我不起作用。（之前列出了 100vh。）

我想要做的是将垂直导航栏一直延伸到页面底部。下面是我尝试过的代码，但没有运气让它一直扩展。

第一段代码，.rectangle，是尝试在页面下方绘制一个矩形框。我在使用矩形时遇到了与使用垂直导航栏相同的问题。它不会到达底部。

.navContainer 和 .verticalNavBar 是我在尝试矩形框之前基本上开始使用的代码。

有人可以帮我找出问题所在吗？

以下是 HTML 和 CSS 文件中的代码：

}

.navContainer {

    box-sizing: border-box;
    margin-left: 0%;
    margin-right: 15%;
    margin-bottom: 0%;
    background-color: grey;
}

.verticalNavBar {

    list-style-type: none;
    margin: 0%;
    padding: 0%;
    width: 15%;
    background-color: grey;
    position: absolute;
    min-height: 100%;
    overflow: auto;
}
    .liVerNavBar a {

    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
  <body>
        <div class="rectangle"></div>
        <nav class="navContainer">
            <ul class="verticalNavBar">
                <li class="liVerNavBar"><a href="Final_HomePage.html"><h2>Home</h2></a></li>
                <li class="liVerNavBar"><a class="active" href="Final_Resources.html"><h2>Resources</h2></a></li>
                <li class="liVerNavBar"><a href="Final_Medications.html"><h2>Medications</h2></a></li>
                <li class="liVerNavBar"><a href="Final_RequestMoreInfo.html"><h2>Request More Information</h2></a></li>
            </ul>
        </nav>

下面是上面给出的代码的样子： 垂直导航栏在底部附近停止

将 .verticalNavBar 更改为具有最小高度：100vh；

.verticleNavBar {
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    width: 15%;
    background-color: grey;
    position: absolute;
    min-height: 100vh;
    overflow: auto;
}

没有影响。当我更新 .navContainer 时，它也具有 min-height: 100vh;

.navContainer {
    box-sizing: border-box;
    margin-left: 0%;
    margin-right: 15%;
    margin-bottom: 0%;
    background-color: grey;
    min-height: 100vh;
}

导航栏周围的灰色框变宽了……几乎占据了屏幕的宽度。

导航栏占据屏幕的宽度

感谢您提供以下答案，但不幸的是它们没有影响导航栏。

标签： htmlcssnav

解决方案

你不能经常在样式表的顶部看到这种设置：

* {
  margin: 0;
  padding: 0;
}

这确保每个元素都没有浏览器设置的任何默认填充或边距。

您可能遇到的是默认情况下存在的底部间隙。

推荐阅读