css网格填充100vh而不影响行高答案

【问题标题】：css grid to fill 100vh without affecting row heightcss网格填充100vh而不影响行高
【发布时间】：2020-01-10 17:43:58
【问题描述】：

我有一个包含 3 列和可变/动态行数的网格。网格有彩色背景，当没有足够的行来垂直填充窗口时，剩余的空白垂直空间不着色：

.grid {
  align-self: flex-start;
  display: grid;
  grid-template-columns: min-content 2fr 1fr;
  grid-gap: 0px;
}
 
.index, .title {
  background: red;
  padding: 0 2vw 0 1vw;
}
 
 .ticker {
  background: yellow;
 }

<div class="grid">
  <div class="index">1</div>
  <div class="title">Pigs are cute</div>
  <div class="ticker">blah blah</div>
  
  <div class="index">2</div>
  <div class="title">Horses rise at night</div>
  <div class="ticker">bleh bleh</div>
  
  <div class="index">3</div>
  <div class="title">Cats run in packs</div>
  <div class="ticker">blih blih</div>
</div>

我希望这个垂直空间像网格一样着色。显而易见的解决方案是让网格的高度为 100vh。但这预计会相应地拉伸每一行的高度，这不是我想要的结果，因为我需要行高来适应内容。

.grid {
  align-self: flex-start;
  display: grid;
  grid-template-columns: min-content 2fr 1fr;
  grid-gap: 0px;
  height: 100vh;
}
 
.index, .title {
  background: red;
  padding: 0 2vw 0 1vw;
}
 
 .ticker {
  background: yellow;
 }

<div class="grid">
  <div class="index">1</div>
  <div class="title">Pigs are cute</div>
  <div class="ticker">blah blah</div>
  
  <div class="index">2</div>
  <div class="title">Horses rise at night</div>
  <div class="ticker">bleh bleh</div>
  
  <div class="index">3</div>
  <div class="title">Cats run in packs</div>
  <div class="ticker">blih blih</div>
</div>

是否有任何 CSS 网格方式可以垂直扩展网格，同时仍允许行高适应内容？

另一种 JavaScript 解决方案，例如在网格中添加空白行直到网格的高度 >= 窗口的高度也是可以接受的。

我认为，flex 解决方案是不可接受的，因为我需要一种类似网格的行为，其中列和行保持对齐。

谢谢

【问题讨论】：

只要确保底部始终至少有一行占用剩余空间。
@HereticMonkey 谢谢，我如何让一行占用剩余空间？
CSS Grid with variable number of "auto" rows, but one row should take "1fr"的可能重复
@HereticMonkey 唯一的答案似乎是说没有办法用css网格做你告诉我要做的事情（让最后一行占据剩余空间），建议使用flexbox。但正如我在问题中所解释的，据我所知，flexbox 不起作用。
对该问题的接受答案显示 flexbox 工作...

标签： javascript css css-grid

【解决方案1】：

由于不同的列有不同的颜色，扩展网格是行不通的，因为网格本身不能有两种不同的颜色。这意味着只有扩展行或添加新行才有效。

由于问题的要求之一是保持行高不变，并且根据this question，添加额外的行并仅扩展该行以占用剩余空间对于 CSS 网格（但 flexbox）是不可能的，唯一的解决方案似乎是通过 JS 添加行，直到网格高度 >= 窗口高度：

var rowHeight = window.getComputedStyle(document.querySelector('.grid').firstElementChild).height;
var row = "<div class='index' style='height:"+ rowHeight +"'></div><div class='title' style='height:"+ rowHeight +"'></div><div class='ticker' style='height:"+ rowHeight +"'></div>";
while (parseFloat(window.getComputedStyle(document.querySelector('.grid')).height) < window.innerHeight) {
  document.querySelector('.grid').innerHTML += row;
}

html, body {
margin: 0;
padding: 0;
}

.grid {
  align-self: flex-start;
  display: grid;
  grid-template-columns: min-content 2fr 1fr;
  grid-gap: 0px;
}
 
.index, .title {
  background: red;
  padding: 0 2vw 0 1vw;
}
 
 .ticker {
  background: yellow;
 }

<div class="grid">
  <div class="index">1</div>
  <div class="title">Pigs are cute</div>
  <div class="ticker">blah blah</div>
  
  <div class="index">2</div>
  <div class="title">Horses rise at night</div>
  <div class="ticker">bleh bleh</div>
  
  <div class="index">3</div>
  <div class="title">Cats run in packs</div>
  <div class="ticker">blih blih</div>
</div>

【讨论】：