为什么设置100vh后元素未占满全屏？响应式导航栏开发问题

问题原因 #

你为.nav-items设置绝对定位时没有显式指定top属性，绝对定位元素在未手动设置偏移值时，会继承它在常规文档流中的初始坐标——也就是当前代码中，.nav-items会从高度为65px的nav元素底部开始渲染，哪怕设置了100vh高度，整体也会向下偏移65px，自然无法占满整个视口高度。

修复方案 #

根据你的实际需求二选一即可：

方案1：侧边栏从视口顶部开始完全铺满 #

直接在媒体查询的.nav-items规则中添加top: 0属性：

@media screen and (max-width: 768px) {    
    header nav .nav-items {
        position: absolute;
        top: 0; /* 新增这行 */
        right: 0;
        height: 100vh;
        width: 50%;
        border: 1px solid black;
    }
}

方案2：侧边栏从导航栏下方开始铺满剩余视口 #

如果你不需要侧边栏覆盖顶部的导航栏，就把高度改成减去导航栏高度的计算值，同时设置top为导航栏高度：

@media screen and (max-width: 768px) {    
    header nav .nav-items {
        position: absolute;
        top: 65px; /* 新增这行，对应nav的高度 */
        right: 0;
        height: calc(100vh - 65px); /* 高度修改为视口高度减去导航高度 */
        width: 50%;
        border: 1px solid black;
    }
}

额外优化建议 #

你当前的HTML结构存在语法不规范问题：<li>标签必须作为<ul>或<ol>的直接子元素，不能直接嵌套在<div>里，建议把.nav-items对应的标签改为<ul>，避免浏览器兼容问题：

<ul class="nav-items">
  <li><a href = '#'>Link-1</a></li>
  <li><a href = '#'>Link-2</a></li>
  <li><a href = '#'>Link-3</a></li>
</ul>

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