HTML双栏布局怎么自适应高度？随内容伸缩技巧-html教程-PHP中文网

双栏布局自适应高度的关键是让每栏按内容自然伸缩而非强行等高：父容器不设height、子项不用height:100%或position:absolute，flex默认stretch在无父高时自动失效，各栏依内容撑开；Grid中应避免grid-template-rows:1fr1fr，改用auto auto。

html双栏布局怎么自适应高度？随内容伸缩技巧

双栏布局自适应高度，关键不是“让两栏强行等高”，而是让每栏按自身内容自然伸缩，同时保持整体结构稳定——只要不写死 height、不滥用 position: absolute、不误用 flex: 0 0 auto，它本就会随内容撑开。

为什么一加 Flex 就两栏高度“锁死”了？

常见现象：给父容器加了 display: flex，两栏却总是一样高，哪怕左边只有标题、右边堆满表格。这不是 Flex 的 bug，是默认行为被误解了。

align-items: stretch 只在父容器有明确高度（如 height: 500px 或 min-height: 100vh）时才生效；父容器高度不定，子项就退回到内容高度
如果某栏内部用了 position: absolute（比如右栏放了个全高视频遮罩），它脱离文档流，父容器“看不见”它的实际高度，导致左栏也被压扁
写了 flex: 0 0 auto 或 align-self: flex-start，等于主动放弃交叉轴拉伸，和没加 Flex 效果一致

不用 JS，纯 CSS 让左右栏各自撑开

核心原则：父容器不设 height，子项不设 height: 100%，让浏览器按内容自然计算高度。

父容器用 display: flex 即可，无需额外设置 align-items —— 默认 stretch 在无父高时自动失效，子项各走各的路
若需某栏占满剩余空间（例如左栏固定，右栏填满视口高度），只给它加 flex: 1，而不是 height: 100%；后者在父容器无高时会算成 0
右栏含 position: absolute 元素时，必须用 padding-bottom 或伪元素模拟占位，否则左栏高度塌陷

Grid 方案下如何避免高度被“平均分配”？

用 display: grid 做双栏，容易掉进 grid-template-rows: 1fr 1fr 的陷阱——它强制等分，和“自适应”背道而驰。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

想让每栏按内容伸缩，直接用 grid-template-rows: auto auto，这是默认值，甚至不用写
需要一栏最小高度、另一栏滚动时，给后者加 min-height: 0 + overflow: auto（Grid 中子项默认最小高度为 min-content，会撑大整个网格）
若容器本身设了固定 height（如 height: 400px），又希望内容少时收缩、多时滚动，就配 overflow: hidden 或 overflow-y: auto，别碰 max-height —— 它在 Grid 中行为不稳定

iframe 或视频区域怎么不破坏双栏流式高度？

和本身无法靠 CSS 自适应高度，尤其当它们被放在右栏时，极易导致左栏高度计算错误或内容被覆盖。

的 height: auto 无效，必须用 JS 读取 contentDocument.body.scrollHeight 后赋值；但更稳妥的做法是把它包进一个有 padding-bottom 的容器里，用 paddingTop / paddingBottom 比例占位
视频区域若需“视觉上全高”，不要用 position: absolute 覆盖右栏，改用 Flex 内部嵌套：.video-wrapper { height: 100%; } + .video-container { height: 100%; object-fit: cover; }
移动端要注意 100vh 在 Safari 中滚动时地址栏收起会导致高度跳变，优先用 min-height: 100dvh，并用 @supports (min-height: 100dvh) 安全兜底