index.html如何实现页面的分屏显示效果？-html教程-PHP中文网

最稳左右分屏用 css grid：设 grid-template-columns、min-height: 100vh、overflow-y: auto，并注意 sticky 定位前提与拖拽的 resizeobserver 实现。

index.html如何实现页面的分屏显示效果？

用 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;
}</p>

用 position: sticky 做左侧固定导航

分屏后常要让左侧菜单滚动时始终可见，position: sticky 是目前最轻量的方案，不用 JS 监听 scroll，也不触发重排。

但它有个硬性前提：父容器必须有明确高度（比如上面的 min-height: 100vh），且不能是 overflow: hidden —— 否则 sticky 会失效，表现和 static 一样。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

左侧区域加 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 }