为何设置min-height仍出现HTML内容溢出？需固定Header与Footer布局

你的问题出在用百分比定义grid行高以及main区域未设置滚动处理上：当main内容过多时，百分比高度的header/footer会限制布局的自适应能力，导致内容直接溢出body和html容器。

以下是修正后的方案：

核心修改点 #

• 将body的grid-template-rows改为minmax(80px, auto) 1fr minmax(40px, auto)：用minmax固定header和footer的最小高度，1fr让main自动占据剩余视口空间，内容多时main会自动扩展，内容少时footer固定在底部。
• 给main添加overflow-y: auto：当main内容超过自身高度时，内部生成滚动条，避免溢出到body外。
• 调整html和body的高度设置，确保布局能正确覆盖整个视口。

修正后的CSS代码 #

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100vh; /* 确保html占满视口最小高度 */
}

body {
    width: 100%;
    min-height: 100vh;
    display: grid;
    /* 用minmax固定header/footer最小高度，main用1fr占剩余空间 */
    grid-template-rows: minmax(80px, auto) 1fr minmax(40px, auto);
    grid-template-areas: 
        "header header header"
        "main main main"
        "footer footer footer";
}

header {
    background-color: navajowhite;
    grid-area: header;
    display: grid;
    grid-template-rows: 40% auto;
    grid-template-areas: "nav nav";
}

nav {
    border: solid red 2px;
    grid-area: nav;
}

main {
    background-color: beige;
    grid-area: main;
    display: grid;
    grid-template-rows: auto 20% auto;
    grid-template-areas: 
        "main1 main1 main1"
        "table table table"
        "main2 main2 main2";
    overflow-y: auto; /* 内容过多时内部滚动 */
}

.main1 {
    border: 2px blueviolet solid;
    grid-area: main1;
}

.table {
    border: 2px solid black;
    grid-area: table;
}

.main2 {
    grid-area: main2;
    border: seagreen 2px solid;
}

footer {
    background-color: blanchedalmond;
    grid-area: footer;
}

修改后效果：

• Header始终固定在顶部，Footer在内容少时固定在视口底部，内容多时跟随在main下方。
• Main区域内容过多时会内部滚动，不会溢出body和html标签。

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