`height: 100%` 依赖父容器高度，而默认 `body` 和 `html` 高度未显式定义，导致百分比高度失效；通过设置 `html, body { height: 100vh }` 或使用 `position: fixed`（脱离文档流后相对视口计算），可使侧边栏撑满全屏高度。
在使用 Bootstrap 构建响应式侧边栏（如导航栏）时，开发者常遇到这样一个问题：为侧边栏容器设置了 height: 100%，但实际渲染高度却远小于预期——甚至仅包裹内容高度。你可能发现，仅添加 position: fixed 后，height: 100% 突然“生效”了。这并非魔法，而是 CSS 高度继承机制与定位上下文共同作用的结果。
? 根本原因：height: 100% 的计算依赖父级显式高度
CSS 中，height: 100% 表示“取其包含块（containing block）的高度的 100%”。而根据规范：
- 对于普通流内元素（position: static 或 relative），其包含块通常是最近的具有明确高度的块级祖先；
- 默认情况下，html 和 body 元素没有显式高度，其高度由子内容决定（即 height: auto）；
- 因此，即使你在 .d-flex.flex-column 容器上写 height: 100%，它的父级（如 body）高度为 auto → 计算结果为 0 → 侧边栏无法撑高。
✅ 正确解法一：为根容器设定视口高度
只需在全局样式中声明：
html, body {
height: 100vh; /* 关键：让根元素获得确定高度 */
margin: 0;
}此时，body 高度 = 视口高度，子元素 height: 100% 即可正常继承。
✅ 正确解法二：使用 position: fixed（你已验证有效）
当设置 position: fixed 时，该元素的包含块变为初始包含块（initial containing block）——即整个视口，此时 height: 100% 直接等价于 100vh，无需依赖父级高度。这也是为何加了 position: fixed 后立即生效。
⚠️ 注意事项：
- position: fixed 会使元素脱离文档流，不再占据原始空间，可能导致主内容区域上移（需配合 margin-left 或 padding-left 预留侧边栏宽度）；
- 若需保持文档流内布局（例如响应式折叠/展开、与主内容协同滚动），推荐优先采用 html, body { height: 100vh } + min-height: 100vh 组合，更语义化且易维护；
- 在 React 项目中，建议将上述 CSS 写入全局样式文件（如 index.css），而非内联样式，便于复用与主题管理。
✅ 推荐实践（无 position: fixed 的完整方案）
// Bar.jsx
import React from 'react';
export default function Bar() {
return (
<div
className="d-flex flex-column flex-shrink-0"
style={{
width: "4.5rem",
backgroundColor: "#cee8ff",
height: "100%" // ✅ 现在能正确生效
}}
>
<a href="" className="d-block p-3 link-dark text-decoration-none">AMS</a>
<ul className="nav nav-pills nav-flush flex-column mb-auto text-center">
{/* ... 导航项保持不变 ... */}
</ul>
</div>
);
}对应全局 CSS（务必添加）：
/* index.css 或 App.css */
html, body {
height: 100%;
margin: 0;
}
/* 更健壮写法（兼容移动端缩放等场景） */
.d-flex.flex-column.flex-shrink-0 {
min-height: 100vh;
}总结：height: 100% 不是“自动填满屏幕”，而是一个相对计算值；理解其依赖的包含块规则，才能精准控制布局行为。避免滥用 position: fixed 解决高度问题——它解决的是定位需求，而非高度继承缺陷。
