Question

我最近开始在CSS中使用Grid布局，我试图让其中一个网格区域中的元素填充整个区域。它可以设置父级的width到100%。但是我很难让height的{{1}}与父div相同。这是一些展示我的问题的代码：

＆＃13;

div

＆＃13;

body {
  width: 100vw;
  height: 100vh
}

.grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: [sidebar-col-start] 15% [sidebar-col-end content-col-start] auto [content-col-end];
  grid-template-rows: [sidebar-row-start content-row-start] auto [sidebar-row-end footer-row-start] 10% [footer-row-end];
}

.area {
  grid-column: content-col-start / content-col-end;
  grid-row: content-row-start / footer-row-start;
  background-color: rgba(255, 0, 0, 0.4);
  align-items: stretch;
}

.footer {
  grid-column: sidebar-col-start / content-col-end;
  grid-row: footer-row-start / footer-row-end;
  background-color: rgba(0, 255, 0, 0.4);
}

.sidebar {
  grid-column: sidebar-col-start / sidebar-col-end;
  grid-row: sidebar-row-start / sidebar-row-end;
  background-color: rgba(0, 0, 0, 0.4);
}

.red {
  background-color: red;
  height: 100%;
}

＆＃13;

指向Codepen的链接：https://codepen.io/Martin36/pen/ayyoxv

我的问题是：如何让<div class="grid"> <div class="sidebar"> </div> <div class="area"> <div class="red"> </div> </div> </div>填充整个父母（这是一个网格区域）？或者更具体地说，如何让孩子的div与父级的身高相匹配？

Answer 1

设置.red，最小高度为100vh。

body {
  margin: 0;
  width: 100vw;
  height: 100vh
}

.grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: [sidebar-col-start] 15% [sidebar-col-end content-col-start] auto [content-col-end];
  grid-template-rows: [sidebar-row-start content-row-start] auto [sidebar-row-end footer-row-start] 10% [footer-row-end];
}

.area {
  grid-column: content-col-start / content-col-end;
  grid-row: content-row-start / footer-row-start;
  background-color: rgba(255, 0, 0, 0.4);
  align-items: stretch;
}

.footer {
  grid-column: sidebar-col-start / content-col-end;
  grid-row: footer-row-start / footer-row-end;
  background-color: rgba(0, 255, 0, 0.4);
}

.sidebar {
  grid-column: sidebar-col-start / sidebar-col-end;
  grid-row: sidebar-row-start / sidebar-row-end;
  background-color: rgba(0, 0, 0, 0.4);
}

.red {
  background-color: red;
  height: 100vh;
}

<div class="grid">
  <div class="sidebar">
  </div>
  <div class="area">
    <div class="red">
    </div>
  </div>
</div>

Answer 2

我遇到了同样的问题，我修复了将grid-template-columns: auto auto auto替换为grid-template-columns: 1fr 1fr 1fr，然后子元素上的max-width: 100%完美运行的情况。

之所以会发生这种情况，是因为auto要求父母将其宽度调整为内容宽度，而1fr使具有max-width: 100%的孩子适应父母的宽度。

这篇文章对我有帮助：https://css-tricks.com/preventing-a-grid-blowout/

CSS使用网格布局将内容设置为父div的100％

2 个答案: