Flexbox布局高度不符合预期问题求助

你的垂直布局问题源于两处关键CSS设置错误：

问题1：容器高度未固定 #

#application 使用 min-height: 100%，意味着当子元素总高度超过视口时，容器会被内容撑开，导致body出现滚动条。需将其改为 height: 100%，强制容器高度与视口高度一致。

问题2：main的flex属性设置错误 #

你给所有子元素（包括main）添加了 flex-shrink: 0，这会阻止main在空间不足时收缩；同时默认的 flex-basis: auto 会让main优先保留自身内容高度，导致高度计算错误。正确做法是给main设置 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%），确保它填充header和footer之间的剩余空间。

修正后的CSS代码 #

html,
body{
    width: 100%;
    height: 100%;
}
body{
    font-family: 'Roboto', serif;
    font-size: 1rem;
    margin: 0;
}
body,
body *{
    box-sizing: border-box;
}
#application{
    background-color: red;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%; /* 替换min-height为height */
    header,
    footer{
        flex-shrink: 0; /* 仅让header和footer不被压缩 */
    }
    header{
        /* 可自定义高度，例如 height: 50px; */
    }
    main{
        flex: 1; /* 用flex:1替代单独的flex-grow:1 */
        overflow-y: scroll;
    }
    footer{
        /* 可自定义高度，例如 height: 50px; */
    }
}

效果验证 #

修正后，#application 会固定为视口高度，header和footer保持自身高度不被压缩，main自动填充剩余空间。当main内容过多时，仅main内部出现滚动条，不会导致body整体滚动。

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