CSS 网格中的最后一行，其中的单元格有一个页脚，并且奇怪地拉伸到相同的高度

Question

我在https://codepen.io/james-hudson3010/pen/wveJqXd

有一支密码笔

我希望实现的目标如下：

我有任意数量的单元格。这个例子只用了10，但是可以多于也可以少于10
每个单元格都有一个页脚，需要与单元格的底部对齐，以便它们在同一行的单元格之间对齐
单元格的高度可以变化，但高度需要拉伸，所以同一行中的每个单元格都具有相同的高度以支持#2

这几乎可以完美地使用 Safari（版本 14.1.2 (15611.3.10.1.5, 15611) ），但最后一行的最后一个单元格比应有的要宽。

Chrome（版本 93.0.4577.63（官方构建）(x86_64) 中的行为更糟）。绘制的行高于它们应有的位置。最后一行的最后一个单元格太宽了。

这是因为缺乏完整的浏览器支持吗？

如果这是因为没有正确指定我的 css，我需要做什么？

.example1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  align-items: stretch;
}

div {
  border: solid 1px;
  padding: 1rem;
}

.contentdiv {
  background-color: red;
  display: table;
  height: 100%;
  width: 100%;
}

.foot {
  display: table-row;
  vertical-align: bottom;
  height: 1px;
}

<div class="example1">
  <div class="contentdiv">1<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">2
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">3
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">4
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">5a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">6
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">7a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">8
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">9
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">10a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
</div>

Answer 1

这与将 contentdiv 的显示设置为 table 并将其宽度和高度设置为 100% 有关。

基本上发生了什么——如果你在网络检查器中查看你的元素——你会看到你所有的元素都比 300px 宽，因为填充 1rem，所以它们是实际上已经重叠了，只是直到最后一行才能看到它。

你可以避免这个设置，* { box-sizing: border-box }和显示改为flex，并使用justify-content 属性来保持foot对齐所有行：

* {
  box-sizing: border-box;
}

.example1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  align-items: stretch;
}

div {
  border: solid 1px;
  padding: 1rem;
}

.contentdiv {
  background-color: red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Avoid the borders stacking */
  margin: -1px;
}

<div class="example1">
  <div class="contentdiv">1<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">2
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">3
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">4
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">5a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">6
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">7a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">8
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">9
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">10a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
</div>

Answer 2

不清楚你提出的要求，如果你期待这个 () 您也可以更好地使用 flex 属性，这更容易 grid image sample 如果是这样，我只是将 class contentdiv 中的高度更改为继承。

Answer 3

根据我的评论，

display:table is not a good idea here (table-layout:fixed would be required for the width) and height : 1px (expanded cause of the table-layout display) is also not a good idea, while flex or grid will do this without sides effects minus the box-sizing:border-box missing to mind height:100% and padding/ border.To set that element at the bottom, flex or grid should be the way to IMHO

这里是一个用网格代替 table 显示的例子 ;)

.example1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  align-items: stretch;
}

div {
  border: solid 1px;
  padding: 1rem;
  box-sizing:border-box;
}

.contentdiv {
  background-color: red;
  display: grid;
  height: 100%;
}

.foot {
  margin-top:auto;/* push it all the way down */
}

<div class="example1">
  <div class="contentdiv">1<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">2
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">3
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">4
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">5a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">6
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">7a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">8
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">9
    <div class="foot">bottom</div>
  </div>
  <div class="contentdiv">10a<br/>a<br/>a<br/>
    <div class="foot">bottom</div>
  </div>
</div>

CSS 网格中的最后一行，其中的单元格有一个页脚，并且奇怪地拉伸到相同的高度

Last row in CSS Grid where cells have a footer and are stretched to same height drawing strangely

html

css

css-tables

css-grid