如何在Tailwind CSS中实现自适应屏幕高度的CSS布局技巧？-css教程-PHP中文网

h-full 失效是因为父容器无显式高度，需配合 min-h-[100dvh]、flex-1 和 overflow-y-auto 实现稳定全高布局，避免依赖 h-screen 或单纯 h-full。

如何在tailwind css中实现自适应屏幕高度的css布局技巧？

h-full 为什么经常失效？

h-full 编译为 height: 100%，而 CSS 中这个值只在父容器有**显式高度**（如 h-screen、min-h-[500px]、h-96）时才生效。父容器若为默认的 height: auto，h-full 就完全不工作——元素高度塌陷为 0 或仅由内容撑开。

常见错误现象：

给 <main></main> 加了 h-full，但外层 <div> 没设高度，结果主区域看不见 <li>在 Flex 布局里对子项用 <code>h-full，却忘了父级是否加了 min-h-0 或 h-full
服务端渲染（如 Next.js）中，h-screen 可能导致首屏布局跳动，尤其在 Safari iOS 上

全高布局该用 min-h-screen 还是 h-screen？

h-screen 基于初始视口高度计算，不响应地址栏收起/展开（iOS Safari 中会跳变），也不兼容 SSR 场景下的首屏渲染；min-h-screen 更安全，它提供最小保障，内容少时不会留白过长，内容多时仍可自然扩展。

但真正跨设备稳定的写法是：min-h-[100dvh]（Tailwind v3.3+ 支持）。dvh 是动态视口单位，能实时响应移动端地址栏变化。注意：

别混用 h-full 和 h-screen：前者依赖父高，后者依赖视口，逻辑冲突
旧版 Tailwind 不支持 dvh，需手动在 tailwind.config.js 中扩展：theme.extend.spacing['100dvh'] = '100dvh'，再用 h-[100dvh]
min-h-[100dvh] 比 h-[100dvh] 更稳妥，因部分安卓 WebView 对 dvh 支持不稳定

Flex 布局中主区域怎么自适应高度？

在 flex flex-col 容器里，别给主区域写 h-full——它既不健壮又易被截断。正确做法是用 flex-1，它不依赖父级显式高度，只按 Flex 规则分配剩余空间。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

典型结构：

<div class="min-h-[100dvh] flex flex-col">
  <header class="h-16"></header><main class="flex-1 overflow-y-auto"></main><footer class="h-12"></footer>
</div>

关键点：