如何实现垂直导航栏占满页面100%高度？100vh设置无效求排查

DevOps 小满

2026-10-8

首先，该问题此前已有相关提问，但给出的解决方案对我无效（此前提到的100vh方案无法解决我的问题）。

我需要实现垂直导航栏延伸至页面底部的效果，目前尝试了多种代码方案都无法达成预期。

我最开始编写.rectangle类是为了绘制一个贯穿页面上下的矩形框，但它和垂直导航栏遇到了相同的问题：都无法延伸到页面底部。.navContainer和.verticalNavBar是我尝试矩形框方案前的基础代码。

有没有人能帮忙排查问题出在哪里？

初始代码

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;
}

HTML代码

<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>
</body>

初始运行后，垂直导航栏未延伸到页面底部。

尝试过的修复方案

将.verticalNavBar的min-height属性设置为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;
}

修改后导航栏外围的灰色框宽度变大，几乎占满了整个屏幕宽度，依旧没有解决问题。

目前已有的回答给出的方案均没有解决我的导航栏问题。

问题排查与解决方案

你遇到的问题由三处错误共同导致：

拼写错误：你修改min-height:100vh时将类名错写为.verticleNavBar，正确类名是.verticalNavBar，拼写错误导致样式没有生效
百分比高度的依赖问题：你最初使用min-height:100%时，没有给父级元素（包括html、body）设置高度，CSS中百分比高度需要基于父元素的明确高度才能计算生效
布局逻辑冲突：.navContainer作为块级元素默认宽度占满可用空间，设置margin-right:15%后，本身宽度占页面85%，添加min-height:100vh后自然会显示为占满大部分屏幕宽度的灰色块，和你要的15%宽度导航栏逻辑冲突

修复后可用代码

首先添加全局基础样式重置，消除浏览器默认样式的影响：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
}

调整导航相关样式：

.navContainer {
    position: relative;
    height: 100%;
}

.verticalNavBar {
    list-style-type: none;
    width: 15%;
    background-color: grey;
    /* 用fixed可以保证滚动时导航栏始终固定在左侧 */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow: auto;
}

.liVerNavBar a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

如果你需要页面滚动时导航栏跟着内容一起移动，把position:fixed改成position:absolute即可。

内容的提问来源于stack exchange，提问作者Brian Ball