Html 用100vh定义的div容器的高度太大（在窗口大小上定位时）

我在css中定义了一个网格，如下所示：

梅因先生{ 显示：网格； /* ¦-------------------------------¦ 阿尔法头 ¦-------------------------------¦ △结构△主正交查看器△ ¦ ¦ ¦ ¦ ¦ ¦ ¦-------------------------------¦ 阿尔页脚阿尔法 ¦-------------------------------¦ */ 网格模板列：25vw 75vw； 网格模板行：8vh 84vh 8vh； } .标题{ 网格柱：1/3； 网格行：1； 填充：20px； } .ortho查看器{ 网格柱：2； 网格行：2； } .结构{ 网格柱：1； 网格行：2； 边框顶部：1件纯黑； 边框底部：1px纯黑； 填充：10px； 溢出：自动； } .结构h3{ 利润率：20px； } .页脚{ 网格柱：1/3； 网格行：3； 填充：20px； } 我还定义了长方体模型，以确保不会遇到填充和边距问题：

html{ 框大小：边框框； } *, *：之前， *：之后{ 框大小：继承； } 但生成的布局超出了视口高度，并显示滚动条。要获得预期的网格配置，我需要做什么？

首先要做的是主体{margin:0；} 导致这种重叠的原因是：。主{网格模板行：8vh 84vh 8vh；} 这样你就可以得到想要的结果

auto的示例：

html{框大小：边框框；} 正文{margin:0；}/*已添加*/ *, *：之前， *：之后{ 框大小：继承； 轮廓：1px纯红；/*仅用于演示*/ } 梅因先生{ /* ¦-------------------------------¦ 阿尔法头 ¦-------------------------------¦ △结构△主正交查看器△ ¦ ¦ ¦ ¦ ¦ ¦ ¦-------------------------------¦ 阿尔页脚阿尔法 ¦-------------------------------¦ */ 网格模板列：25vw 75vw； 网格模板行：8vh自动8vh；/*已从84vh更改*/ 显示：网格； } .标题{ 网格柱：1/3； 网格行：1； 填充：20px； } .ortho查看器{ 网格柱：2； 网格行：2； } .结构{ 网格柱：1； 网格行：2； 边框顶部：1件纯黑； 边框底部：1px纯黑； 填充：10px； 溢出：自动； } .结构h3{ 利润率：20px； } .页脚{ 网格柱：1/3； 网格行：3； 填充：20px； } 标题 主要的 观众 标题

---

页脚只需清除正文的默认边距

body {
    margin: 0
}

---

这与浏览器在结合应用于其中某些元素的填充时解释的vh和fr之间的差异有关

如果将fr替换为行/列有效值，则会出现溢出

* { 保证金：0； 填充：0； 框大小：边框框； } ：：之前， ：：之后{ 框大小：继承； } html， 身体{ 身高：100%； 背景：粉红色； } 梅因先生{ 身高：100%； 显示：网格； 网格模板柱：1fr 3fr； /*网格模板行：8vh 84vh 8vh*/ 网格模板行：8fr 84fr 8fr； } .标题{ 网格柱：1/3； 网格行：1； 填充：20px； 背景：红色； } .ortho查看器{ 网格柱：2； 网格行：2； 背景：绿色； } .结构{ 网格柱：1； 网格行：2； 边框顶部：1件纯黑； 边框底部：1px纯黑； 填充：10px； 溢出：自动； 背景：黄色； } .结构h3{ 利润率：20px； } .页脚{ 网格柱：1/3； 网格行：3； 填充：20px； 背景：蓝色； }

---

非常感谢您的回复。不幸的是，这并没有解决我的问题。奇怪的是，我在你的代码笔示例中也看到了同样的行为……非常感谢你的回复。不幸的是，这并没有解决我的问题。我的主体边距为0，也使用了行定义-仍然相同。看来@Paulie_D建议使用不同的度量修正：