如何让div正好拉伸至页面底部 存在header时无溢出无需手动计算

核心采用Flexbox垂直布局实现自动填充剩余高度，无需手动计算头部、底部高度差，完美适配响应式场景，仅需要修改三处CSS即可：

1. 调整根元素基础布局 #

修改html、body的原有样式，将页面整体设为垂直流式flex布局：

html, body{
    /* 移除原有height:100%、min-height: 100% !important规则 */
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

2. 修改wrapper容器样式 #

给wrapper添加flex自动填充属性，让它占满头部、底部hr之外的所有剩余视口高度：

#wrapper{
    /* 移除原有height: fit-content规则 */
    flex: 1;
    width: 100%;
    background-color: #2e3e56;
    padding-right: 3.5%;
    overflow: hidden;
}

如果想要避免float布局带来的高度塌陷问题，可以给#wrapper额外添加display: flex; gap: 1.5%;规则，同时删除#sidebar、#main的float属性，布局稳定性更高。

3. 调整main区域高度规则 #

删除原有的100vh设置，让main区域自动撑满wrapper的高度：

#main{
    z-index: 1;
    background-color: white;
    font-size: 1rem;
    /* 移除原有min-height: 100vh、height: fit-content规则 */
    min-height: 100%;
    width: 77.5%;
    float: right;
    overflow: auto; /* 内容过多时内部滚动，不会撑高整体页面 */
    padding: 0.625rem;
}

完成以上修改后，wrapper会自动适配剩余高度，main区域也会刚好延伸到页面底部，不会出现多余滚动条，头部高度变化时也无需手动调整参数。

内容的提问来源于stack exchange，提问作者Hunor Czékmán