将网格高度调整到没有滚动条的可用屏幕

Question

我应该使用什么网格属性才能使网格完美地保持在屏幕内？

在 .wrapper 上使用 height: 100vh; 可以调整高度，但会引入滚动条。要删除不需要的滚动条，我尝试设置 body{margin:0;} 但我希望在不产生滚动条的情况下在整个网格周围留出边距。我确信这很容易修复，但请帮助我！

代码笔：https://codepen.io/reiallenramos/pen/yzroxe

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: lightcyan;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  height: 100vh;
}

.wrapper>div {
  background-color: #eee;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-column: 1/2;
  grid-row: 1/5;
}

.item2 {
  grid-column: 2/3;
  grid-row: 1/3;
}

.item3 {
  grid-column: 3/5;
  grid-row: 1/3;
}

.item4 {
  grid-column: 2/4;
  grid-row: 3/5;
}

.item5 {
  grid-column: 4/5;
  grid-row: 3/6;
}

.item6 {
  grid-column: 1/3;
  grid-row: 5/7;
}

.item7 {
  grid-column: 3/4;
  grid-row: 5/7;
}

.item8 {
  grid-column: 4/5;
  grid-row: 6/7;
}

<div class="wrapper">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
</div>

Answer 1

除了将 html 正文的边距设置为 0 之外，我发现唯一可行的方法是：

html, body {
  height: 96vh;
}

Answer 2

您必须从 wrapper

中减去额外的保证金

calc(100vh - 16px)

那就不用100%用在身上了

Answer 3

主要浏览器通常在 body 元素上设置默认边距。通常为 8px，如 recommended by the W3C.

因此，当设置 body 元素或另一个容器为 height: 100% 时，会呈现垂直滚动条，因为存在溢出条件：

100% + 8px > the viewport height

简单的解决方法是用您自己的规则覆盖浏览器的默认规则：

body { margin: 0; }

但是，在这种情况下，您需要主容器周围的间隙。你不需要滚动条。

然后只需将margin替换为padding，并使用box-sizing: border-box。

使用 box-sizing: border-box，填充和边框（但不包括边距）被计入内容长度。

body {
  margin: 0;
  background-color: lightcyan;
}

/* NEW */
* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 8px;
  padding: 8px; /* NEW */
  height: 100vh;
}

.wrapper>div {
  background-color: #eee;
}

.wrapper>div:nth-child(odd) {
  background-color: #ddd;
}

.item1 {
  grid-column: 1/2;
  grid-row: 1/5;
}

.item2 {
  grid-column: 2/3;
  grid-row: 1/3;
}

.item3 {
  grid-column: 3/5;
  grid-row: 1/3;
}

.item4 {
  grid-column: 2/4;
  grid-row: 3/5;
}

.item5 {
  grid-column: 4/5;
  grid-row: 3/6;
}

.item6 {
  grid-column: 1/3;
  grid-row: 5/7;
}

.item7 {
  grid-column: 3/4;
  grid-row: 5/7;
}

.item8 {
  grid-column: 4/5;
  grid-row: 6/7;
}

<div class="wrapper">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
</div>

将网格高度调整到没有滚动条的可用屏幕

Adjust grid height to available screen without scrollbar

html

css

css-grid