.sidenav 设 height: 100vh 未满屏，主因是父容器高度为 auto、定位缺失（如 fixed/absolute 未配 top/bottom）、iOS Safari 视口计算偏差、被 Bootstrap 容器限制或 DOM 嵌套错误。
为什么 .sidenav 设了 height: 100vh 还是没满屏
因为 .sidenav 很可能被嵌套在默认高度为 auto 的父容器里（比如 .container 或未重置的 body），而 height: 100vh 虽然不依赖父高，但若它本身是 position: absolute 或 fixed，又没配 top/bottom: 0，就会脱离文档流、只按内容撑高；更常见的是：你写了 height: 100vh，但浏览器把地址栏高度也算进 vh，iOS Safari 下实际可视区域更小，导致底部留白。
正确写法：用 min-height: 100vh + 显式定位
直接替换掉 height: 100vh，改用 min-height: 100vh，并确保定位可控：
-
.sidenav { min-height: 100vh; width: 100vw; }—— 宽高都用视口单位，绕过父容器塌陷 - 如果用了
position: fixed，必须加top: 0; left: 0; right: 0; bottom: 0;，否则它不会“占满” - 如果用了
position: absolute，其包含块（通常是最近的position: relative祖先）必须有明确高度，否则100vh仍可能失效 - 移动端优先写
min-height: 100dvh，再用@supports降级：min-height: 100vh;<br>@supports (min-height: 100dvh) {<br> min-height: 100dvh;<br>}
Bootstrap 栅格干扰：别让 .container 切掉你的侧边栏
很多开发者把 .sidenav 塞进 .container 或 .row 里，结果被 padding、max-width 和 flex 行为限制。解决方法很直接：
- 把
.sidenav移出所有 Bootstrap 容器，放在<body>直接子级位置 - 如果必须保留在栅格内，用
.container-fluid+mx-0 px-0清除左右内边距 - 避免给
.sidenav加col-*类，它不是响应式列，而是全高功能区 - 检查是否误加了
overflow: hidden，这会截断内容或隐藏滚动条
内容超长时垂直居中失效？别硬撑，用 Flex 更稳
单纯靠 min-height: 100vh 只能保证“至少一屏”，但如果你还想让登录表单之类的内容始终垂直居中，就别只靠 margin-top 百分比或绝对定位——那些在不同屏幕下极易偏移。
立即学习“前端免费学习笔记（深入）”；
- 给
.sidenav加display: flex; flex-direction: column;，再对子元素用justify-content: center; - 或者用
align-items: center;+min-height: 100vh;组合，比height: 100%更可靠 - 慎用
h-100类：它等价于height: 100%，要求所有祖先（html,body, 父容器）都设了明确高度，否则无效 - 若要兼容 iOS 15 及更早版本，JS 动态设置
--vh变量仍是兜底首选，且必须监听resize和orientationchange
真正容易被忽略的点是：你改了 .sidenav 的 CSS，却没动 HTML 结构——比如它还被包在 <div class="container"> 里，或和 .main 形成错误嵌套。这时候再调样式也没用，得先理清 DOM 层级关系。
