基于Tailwind CSS实现页面元素垂直布局的问题求助

需求 #

要实现一个包含三个元素的页面布局，需遵循以下规则：

• 占满页面全部垂直空间
• 顶部标题文本完全可见，支持换行，位于图片上方
• 底部按钮完全可见，固定在页面底部
• 中间图片尽可能占据剩余空间

当前问题：无法适配任意长度的标题文本，标题过长时会挤压图片或导致布局错乱。

修复后的代码 #

核心思路是利用Flex布局特性，让标题和按钮占据自身所需高度，图片自动填充剩余空间：

<div class="flex h-screen flex-col bg-blue-500">
  <!-- 标题区域：自动适应内容高度 -->
  <div class="mx-10 mt-4 text-center text-5xl font-black text-white drop-shadow-lg">
    Text, should always be visible and could take just one or several lines to be displayed on the screen of the user.
  </div>
  <!-- 图片区域：填充剩余空间，保持比例 -->
  <div class="flex grow items-center justify-center px-4">
    <img class="max-h-full w-auto object-contain" src="https://c0.wallpaperflare.com/preview/882/54/391/animal-baby-bird-born.jpg" alt="xxx" />
  </div>
  <!-- 按钮区域：固定在底部，不挤压其他元素 -->
  <div class="mb-4 flex items-center justify-center">
    <div class="flex cursor-pointer flex-row items-center justify-center rounded border border-white/30 bg-blue-900 px-2 py-1 font-semibold text-white/90 transition duration-150 ease-in-out hover:border-black/70 hover:bg-white hover:text-gray-800" title="Skip">
      <span> Button, should always be visible, below the duck</span>
    </div>
  </div>
</div>

关键调整说明 #

• 最外层容器使用 flex flex-col h-screen，确保垂直占满屏幕并采用弹性布局
• 标题区域不设置固定高度，让它根据内容自动撑开，保证完全可见
• 图片区域添加 grow 类，自动填充标题和按钮之外的剩余空间，同时用 items-center justify-center 让图片居中显示，max-h-full 确保图片不会超出容器高度
• 按钮区域放在flex容器的最后，自动固定在底部，设置 mb-4 保持间距

内容的提问来源于stack exchange，提问作者Termos