使用网格布局的容器高度为零答案

【问题标题】：Container using the grid layout has a height of zero使用网格布局的容器高度为零
【发布时间】：2020-07-25 10:22:50
【问题描述】：

display: grid;
font-family: "Josefin Sans", sans-serif;
font-size: 10px;
height: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;

我有一个包含上面计算的 css 的容器，然后我将高度设置为 auto 以便它匹配其子项的内容，但由于某种原因高度保持为 0。

.slideshow {
    display: grid;
    position: relative;
    height: auto;
}

只有当我使用 height: 300px 时它才会改变，但我不想为 height 设置一个值并使其适合孩子的身高。

我按照这里的建议尝试了“高度：最大内容”：Expanding a parent <div> to the height of its children

但是，它没有用。对使用 display:grid 的 div 容器有什么需要做的吗？

【问题讨论】：

标签： css

【解决方案1】：

您的代码运行良好：

.slideshow {
    display: grid;
    position: relative;
    height: auto;
    font-size: 20px;
}

<div class="slideshow">
  <div style="background-color: red;">Red</div>
  <div style="background-color: green;">Green</div>
  <div style="background-color: blue;">Blue</div>
  <div style="background-color: yellow;">Yellow</div>
  <div style="background-color: orange;">Orange</div>
</div>

您应该确保您的孩子实际上具有由内容定义的具体高度。如果这不能解决问题，请发布您的子元素，我会更新答案。

【讨论】：