最稳左右分屏用 CSS Grid：设 grid-template-columns、min-height: 100vh、overflow-y: auto，并注意 sticky 定位前提与拖拽的 ResizeObserver 实现。
用 CSS Grid 实现左右分屏最稳
直接用 display: grid 划两列，比浮动、Flex 或 iframe 都更可控，也天然支持响应式回退。关键不是“怎么分”，而是“分完内容怎么不溢出、不重叠、不塌陷”。
常见错误是只写 grid-template-columns: 1fr 1fr，但没限制子容器高度，导致右侧内容把左侧撑变形；或者忘了给 html 和 body 设 height: 100%，结果分屏只占内容高度，不是全屏。
- 给
body和html加margin: 0; height: 100% - 分屏容器设
min-height: 100vh，避免内容少时高度不足 - 两侧子区域用
overflow-y: auto，防内容超长时溢出不可见 - 想固定左侧导航、右侧主内容？改用
grid-template-columns: 240px 1fr更实际
<div class="split-view">
<aside>导航栏</aside>
<main>主内容区</main>
</div>
<p>.split-view {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
.split-view > * {
overflow-y: auto;
}用 position: sticky 做左侧固定导航
分屏后常要让左侧菜单滚动时始终可见，position: sticky 是目前最轻量的方案，不用 JS 监听 scroll，也不触发重排。
但它有个硬性前提：父容器必须有明确高度（比如上面的 min-height: 100vh），且不能是 overflow: hidden —— 否则 sticky 会失效，表现和 static 一样。
立即学习“前端免费学习笔记（深入）”；
- 左侧区域加
position: sticky; top: 0; - 确保它的父级（即
.split-view）有可计算的高度 - 如果右侧内容用了
transform或will-change，可能创建新层叠上下文，干扰 sticky 定位，先关掉测试 - 移动端 Safari 对 sticky 支持略差，iOS 15.4+ 才稳定，老版本建议降级为 JS 滚动监听
resizeObserver 监听分屏拖拽调整宽度
纯 CSS 分屏是静态的，用户没法拖动边线调整比例。真要实现可拖拽，得靠 ResizeObserver + mousedown/move，而不是监听 window.resize —— 后者只响应窗口大小变化，抓不到拖拽过程中的实时宽度。
核心逻辑是：鼠标按下时记录初始位置和当前列宽，移动时计算偏移，动态更新 grid-template-columns 的内联样式。难点在防抖和边界限制，否则拖拽会卡顿或穿出屏幕。
- 用
requestAnimationFrame包裹 width 更新，避免 layout thrashing - 拖拽元素必须设
user-select: none，否则文字被选中会打断操作 - 更新列宽时，推荐用
calc()表达式（如calc(300px + 20%)），比纯像素值更适应缩放 - 别忘了
touchstart/touchmove兼容移动端，但 iOS Safari 的 touch 事件默认不冒泡，需加{ passive: false }
iframe 分屏的坑比想象中多
有人想用两个 iframe 实现完全隔离的左右页，但实际几乎不可行：跨域时无法通信、无法同步滚动、无法共享登录态，连页面标题都拿不到。同域下也有问题 —— iframe 默认有边框和空白 margin，且 height: 100% 在嵌套结构里经常失效。
- 必须显式设
frameborder="0" style="border: none; width: 100%; height: 100%;" - 父页面要监听
iframe.onload后再设高，否则取到的是 0 - 若子页用
vh单位，可能因 iframe 自身滚动条导致高度错乱 - 现代项目基本该用微前端方案（如 Module Federation）替代 iframe，而不是把它当分屏工具
真正需要分屏的场景，90% 都该用 CSS Grid + 适度 JS 控制。强行用 iframe 或 JS 手动算尺寸，最后都会卡在滚动同步、焦点管理、无障碍支持这些细节上。
