如何利用HTML构建侧边栏导航条_通过CSS height:100%与fixed-html教程-PHP中文网

height: 100% 在侧边栏失效是因为父级高度未定义，导致计算值为0；需显式设置 html、body 高度为 100vh 或使用 fixed 定位以视口为包含块，或确保 flex 容器高度确定。

如何利用html构建侧边栏导航条_通过css height:100%与fixed

height: 100% 在侧边栏上不生效，不是写错了，而是它根本没东西可“百分比”——父级高度没定义，它算出来就是 0。

为什么 `height: 100%` 在侧边栏里常失效

CSS 的 height: 100% 不是“撑满屏幕”，而是“取包含块高度的 100%”。普通流中，包含块是最近的、有明确高度的祖先元素。而默认情况下：html 和 body 高度为 auto，由内容撑开；没有内容时，高度就是 0 → 子元素 height: 100% 自然也是 0。

即使你给侧边栏父容器（比如 .sidebar-wrapper）写了 height: 100%，只要它的父级没显式高度，链式继承就断了
min-height: 100vh 能视觉上“撑高”，但不等于 height: 100% 生效——后者仍依赖父级计算值
用 flex 布局时，height: 100% 同样受制于 flex 容器自身高度是否确定

`position: fixed` 为何能让 `height: 100%` “突然有效”

因为 position: fixed 彻底改变了包含块：它不再找父级，而是直接以视口（viewport）为包含块。height: 100% 此时等价于 height: 100vh，无需任何父级高度声明。

必须配 top: 0; bottom: 0; 或 inset: 0; 才能真正占满垂直方向；只写 height: 100% 不够
脱离文档流后，主内容会“上移”覆盖原侧边栏位置，需手动给 main 加 margin-left 或 padding-left 预留空间
滚动时侧边栏固定不动，但若需与主内容同步滚动（如长菜单+长正文），这种方案反而破坏体验

不用 `fixed` 也能让 `height: 100%` 生效的可靠写法

核心是让根元素获得可计算的高度，且不破坏文档流。最稳妥的是在全局样式中设置：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

html, body {
  height: 100vh;
  margin: 0;
}

之后所有后代元素的 height: 100% 才有据可依；body 成为有效的“高度锚点”
若侧边栏嵌套在 Flex 容器中（如 display: flex; flex-direction: column;），还需确保该容器本身也有确定高度（例如父级也设 height: 100%）
React/Vue 项目中，别把这条塞进组件内联样式——它必须作用于 html 和 body，否则无效