HTML左侧固定导航怎么调整右侧内容布局-html教程-PHP中文网

右侧内容被左侧固定导航遮挡，是因为 fixed 元素脱离文档流，主内容需手动让出空间：设 margin-left 与侧边栏 width 一致；或用 flex 布局，父容器 display: flex、侧边栏 flex: 0 0 240px、主内容 flex: 1；收起时用 transform + transition，避免 display: none。

html左侧固定导航怎么调整右侧内容布局

右侧内容被左侧固定导航遮挡，不是导航没“固定”好，而是主内容根本不知道左边有块固定区域——它还在按普通文档流从左上角开始渲染。

用 `position: fixed` 时，主内容必须手动让出空间

fixed 元素完全脱离文档流，右侧内容不会自动绕开。常见错误是只设了 .sidebar { position: fixed; width: 240px; }，却忘了告诉主内容：“你左边 240px 是禁区”。

主内容区（比如或 ）必须加 margin-left: 240px，且这个值要和侧边栏的 width 完全一致
如果主内容本身有滚动条，需确保 html, body { overflow-y: scroll; }，否则 height: 100vh 在 Safari 中可能计算错误导致底部留白或溢出


不要给主内容设 width: 100%，它会和 margin-left 叠加，造成横向滚动
用 display: flex 更健壮，但子元素行为必须显式声明
flex 布局下，右侧内容不会被遮挡，但新手常误以为只要父容器设 display: flex 就万事大吉——其实关键在子项的 flex 值。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										
父容器（如  或外层 ）设 display: flex; min-height: 100vh;
侧边栏设 flex: 0 0 240px;（不缩放、不增长、宽固定）

主内容区必须设 flex: 1;，等价于 flex: 1 1 0;，这才是真正“填满剩余空间”的逻辑
避免在主内容内部再用 width: 100%，它可能和 flex 计算冲突，尤其嵌套多层时
响应式收起侧边栏时，主内容过渡不能靠 display: none

直接对侧边栏切 display: none，主内容会瞬间跳到左边，毫无过渡感。CSS transition 对 display 不生效。

改用 transform: translateX(-100%) 隐藏侧边栏，并配 transition: transform 0.3s ease;

主内容区不要依赖 margin-left，而应走 flex 布局——这样侧边栏隐藏后，主内容自动撑满，无需额外样式切换
JavaScript 控制开关时，只操作类名（如 document.body.classList.toggle("sidebar-collapsed")），别直接写 style.display = "none"


最易被忽略的点：侧边栏内部若需局部滚动（比如菜单过长），不能只给侧边栏设 overflow-y: auto，还得确保它的高度来源明确——要么父 flex 容器有 min-height: 100vh，要么侧边栏自己设 height: 100vh 并配合 box-sizing: border-box，否则滚动可能失效或错位。