Tailwind Footer不吸底 相邻元素溢出时Footer被推出可视区域问题求助

问题原因 #

• 外层纵向flex容器未限制总高度，内容溢出时容器整体会自动撑开超出视口范围
• 配置了overflow-y-auto的Main元素未正确设置flex伸缩规则，内容溢出时不会触发滚动，反而会优先撑开自身高度把Footer挤出可视区域

解决方案 #

如果使用Tailwind CSS，按以下规则修改即可：

• 给最外层的纵向flex容器添加h-screen（如需固定为其他高度替换对应高度类即可）+ overflow-hidden类，限制容器总高度不会超出视口
• 给Main元素保留原有overflow-y-auto的基础上，添加flex-1类，让该元素自动占满Header和Footer之外的剩余高度，内容溢出时自动触发纵向滚动

如果使用原生CSS，对应配置如下：

/* 外层flex容器样式 */
.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 限制总高度为视口高度 */
  overflow: hidden;
}
/* Main区域样式 */
.main-content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  overflow-y: auto;
}
/* Header、Footer不需要额外修改，按自身内容高度渲染即可 */

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