时间戳

首页 > 解决方案 > CSS Grid 将高度和宽度拉伸到容器

html - CSS Grid 将高度和宽度拉伸到容器

问题描述

我无法让 CSS Grid 的高度和宽度都拉伸到其父级大小。将其设置为 100% 时宽度会很好地拉伸，但高度会保持其初始大小？我不确定在哪里计算高度大小。

将所有行的 grid-template-rows 设置为 25% 时，我认为这会给我所需的 100% 高度，但它不起作用。

JSFiddle

body {
  margin: 10px;
  background-color: red;
  height: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: 
    "a b c d" 
    "e f f g" 
    "h f f i" 
    "j k l m";
  height: 100%;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

.i {
  grid-area: i;
}

.j {
  grid-area: j;
}

.k {
  grid-area: k;
}

.l {
  grid-area: l;
}

.m {
  grid-area: m;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

标签： htmlcsscss-grid

解决方案

要跟随屏幕高度，您可以使用视口单位vh而不是pxor %;

使用 CSS3 的 vw 和 vh 单位调整大小

body {
  background-color: red;
  height: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: "a b c d" "e f f g" "h f f i" "j k l m";
  height: 100vh;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

.i {
  grid-area: i;
}

.j {
  grid-area: j;
}

.k {
  grid-area: k;
}

.l {
  grid-area: l;
}

.m {
  grid-area: m;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

推荐阅读