提问人：Oscar R 提问时间：3/10/2023 最后编辑：Michael BenjaminOscar R 更新时间：3/10/2023 访问量：93
如何使所有网格列的高度等于最短列的高度 [复制]
How can I make all my grid column have their height be equal to the height of shortest column [duplicate]
问：
正如您在我的代码片段中看到的，两列的高度都设置为最高列的高度。但是，我希望我的列的高度设置为最短的列，而第二列将具有溢出滚动。
我不知道其中任何一列的高度，因为它们的内容是动态加载的。
如果 flex 可以达到我想要的结果，我也不需要使用网格。
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.item1 {
background-color: #00ffff;
}
.item2 {
background-color: #ff00ff;
overflow-y: auto;
}<div class='grid'>
<div class='item1'>
<div class='item1_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class='item2'>
<div class='item2_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>答：
2赞
Wimanicesir
3/10/2023
#1
为此，您可以使用 javascript。 我认为对于这个:)，没有唯一的CSS解决方案
let referenceBox = document.getElementsByClassName("item1_content")[0];
let adjustedBox = document.getElementsByClassName("item2_content")[0];
adjustedBox.style.height = referenceBox.offsetHeight + 'px';.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.item1 {
background-color: #00ffff;
}
.item2 {
background-color: #ff00ff;
overflow-y: auto;
}<div class='grid'>
<div class='item1'>
<div class='item1_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class='item2'>
<div class='item2_content'>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
评论