html - 用 100vh 定义的 div 容器的高度太大(看起来它根据窗口大小定位自身)

Question

我在css中定义了一个网格如下:

.main {
    display: grid;
    /*
    ¦-------------------------------------------------------------¦
    ¦ Header                                                      ¦
    ¦-------------------------------------------------------------¦
    ¦ Structures ¦ Main (ortho-viewer)                            ¦
    ¦            ¦                                                ¦
    ¦            ¦                                                ¦
    ¦-------------------------------------------------------------¦
    ¦ Footer                                                      ¦
    ¦-------------------------------------------------------------¦
     */
    grid-template-columns: 25vw 75vw ;
    grid-template-rows: 8vh 84vh 8vh;
}
.header {
    grid-column: 1 / 3;
    grid-row: 1;
    padding: 20px;
}
.ortho-viewer {
    grid-column: 2;
    grid-row: 2;
}
.structures{
    grid-column: 1;
    grid-row: 2;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 10px;
    overflow: auto;
}
.structures h3 {
    margin: 20px;
}
.footer {
    grid-column: 1 / 3;
    grid-row: 3;
    padding: 20px;
}

我还定义了盒子模型以确保我不会遇到填充和边距的问题:

html {
   box-sizing: border-box;
 }
 *,
 *:before,
 *:after {
   box-sizing: inherit;
 }

但是生成的布局超出了视口(viewport)高度并且显示了滚动条。我需要做什么才能获得预期的网格配置？

Answer 1

只需清除主体的默认边距。

body {
    margin: 0
}

See on Codepen