时间戳

首页 > 解决方案 > 用 100vh 定义的 div 容器的高度太大（看起来它在窗口大小上定位）

html - 用 100vh 定义的 div 容器的高度太大（看起来它在窗口大小上定位）

问题描述

我在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;
 }

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

标签： htmlcss

解决方案

只需清除正文的默认边距。

body {
    margin: 0
}

参见 Codepen

推荐阅读