如何对齐flexbox子元素高度？解决圣杯布局侧边栏高度不匹配问题

你遇到的两侧列高度不跟中间内容对齐、窗口高度缩小后内容截断底部留白的问题，属于flex圣杯布局的典型高度配置错误，核心原因和修复方案如下：

核心问题成因 #

• 外层布局容器错误使用固定视口高度：大部分这类问题都是给包含header、三列内容、footer的根布局容器设置了height: 100vh，固定高度会限制容器最大高度只能等于当前视口高度，当中间内容高度超过视口时，容器不会跟着内容撑开，就会出现内容溢出截断、底部留白的问题。
• 三列容器的flex对齐配置错误：如果三列的父容器没有保持默认的align-items: stretch属性，或者给侧边栏单独设置了高度限制，就会导致侧边栏高度只能撑满父容器高度，无法和高度更高的中间内容列对齐。

具体修复步骤 #

1. 把根布局容器的height: 100vh替换为min-height: 100vh，保证视口高度足够时容器占满全屏，内容超过视口高度时容器会跟着内容自动拉伸，不会被限制高度。
2. 三列的父容器不需要设置固定高度，保留默认的align-items: stretch配置，不要给侧边栏单独设置高度、最大高度限制，三列会自动统一高度为最高列的高度，自然实现两侧和中间内容高度对齐。
3. 不需要给中间内容列加单独的overflow: auto滚动配置，页面整体滚动即可，避免中间列滚动时侧边栏固定在视口高度、无法跟中间内容同步拉伸。

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