真正能实现右侧高度随左侧变化的方案只有bfc触发+流式布局或flex/grid的天然对齐能力；position定位因脱离文档流无法实现高度自适应，而flex的stretch、grid的align-items: stretch及float+bfc兜底方案均需父容器提供高度上下文。
右侧元素高度自适应左侧，不是靠 position 定位解决的——position: absolute 或 position: fixed 会让元素脱离文档流，高度根本不会“跟随”，反而容易错位、重叠、响应失效。真正能实现“右侧高度随左侧变化”的方案，只有 **BFC 触发 + 流式布局** 或 **Flex/Grid 的天然对齐能力**。
为什么 position 定位做不到高度自适应
常见误操作是给左侧 float: left，右侧用 position: absolute 并设 top: 0; left: 200px。结果：右侧高度完全独立于左侧，哪怕左侧内容拉长到 1000px，右侧仍只撑开自身内容高度；滚动时错位、焦点丢失、无障碍支持崩坏；且无法响应父容器高度变化（比如 min-height: 100vh）。
-
position: absolute元素的尺寸计算不参与父容器的流式布局，高度由自身内容或显式height决定，和兄弟元素无关 - 若强行用
height: 100%，则依赖父容器有明确高度（如height: 500px），但实际项目中父容器往往靠内容撑开，100%失效 -
position: sticky或relative不解决高度同步问题，只是偏移或定位上下文控制
用 Flex 实现高度自动对齐（推荐）
Flex 容器默认让所有子项在交叉轴（flex-direction: row 时是垂直方向）上拉伸对齐，只要不设 align-items: flex-start 就行。这是最直接、无副作用的方式。
- 父容器必须设
display: flex和flex-direction: row（默认值，可省略） - 左侧用
flex: 0 0 240px锁定宽度，避免被压缩 - 右侧用
flex: 1，同时确保没设align-self: flex-start—— 默认就是stretch，高度自动填满容器 - 若右侧内容少、想保持最小高度，加
min-height: 100%（需父容器有高度来源，如min-height: 100vh）
.container {
display: flex;
min-height: 100vh; /* 提供高度上下文 */
}
.left { flex: 0 0 240px; }
.right { flex: 1; } /* 自动 stretch，高度同 left */
用 Grid 实现等高（语义更清晰）
Grid 的 align-items: stretch 是默认行为，比 Flex 更少隐式依赖，尤其适合需要精确控制列宽+等高的场景。
- 父容器设
display: grid和grid-template-columns: 200px 1fr - 无需额外声明对齐方式，子项默认在行方向（
block轴）上拉伸 - 若左侧高度动态变化（比如 JS 展开菜单），右侧会实时响应，无需 JS 干预
- 注意：别漏掉
min-height上下文，否则 Grid 容器本身高度塌陷，拉伸无效
.container {
display: grid;
grid-template-columns: 200px 1fr;
min-height: 100vh;
}
老项目兜底：float + BFC 也能等高，但有条件
仅当左侧高度固定或由内容决定、且右侧触发 BFC 时，视觉上“看起来”等高——本质是右侧容器高度由其内部内容撑开，而左侧浮动后父容器若不清除浮动，高度塌陷，右侧就失去参照。所以必须：
- 父容器用
overflow: hidden或display: flow-root清除浮动，使其获得正确高度 - 右侧必须触发 BFC（如
overflow: hidden），否则它不会“感知”父容器真实高度 - 右侧不能设
height或max-height，否则会截断 - 这个方案是“伪等高”：右侧高度 = 自身内容高度，但因父容器高度 = 左侧内容高度，所以两者视觉一致；一旦右侧内容超长，它会溢出并撑高父容器，依然保持同步
真正卡住的从来不是“怎么写等高”，而是忘了给父容器提供高度上下文（min-height / height）、或者用 position 破坏了流式关系。Flex 和 Grid 的 stretch 行为只在容器有高度时生效，而这个前提，90% 的人会跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
