CSS Grid将高度和宽度拉伸到容器[重复]

Posted 2023-03-04

【中文标题】CSS Grid将高度和宽度拉伸到容器[重复]

【英文标题】：CSS Grid stretch height and width to container [duplicate]

【发布时间】：2019-10-30 14:59:12

【问题描述】：

我无法让 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>

【问题讨论】：

将height: 100% 添加到html，参见***.com/questions/1575141/…

【参考方案1】：

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

Sizing with CSS3's vw and vh units

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>

【参考方案2】：

试试这个，把高度从100%改成100vh

.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%;