Css 我怎样才能让我所有的网格列的高度等于最短列的高度

发布于03月10日

正如您在我的代码片段中看到的，两列的高度都设置为最高列的高度.但是，我希望我的列的高度设置为最短的列，其中第二列将使用溢出滚动.

我不知道这两个列的高度，因为它们的内容是动态加载的.

如果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>

推荐答案

您可以使用Java脚本来实现这一点. 我认为没有唯一的解决方案来解决这个问题:)

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>

Css 我怎样才能让我所有的网格列的高度等于最短列的高度

推荐答案

Css相关问答推荐

导航栏没有使用nextui获取页面的全部宽度

如何使用遮罩创建手绘SVG动画

为什么CSS flex似乎应用了两次内部元素的填充？

将数据从react组件发送到css文件

为什么我的 React slick 轮播响应能力不起作用？

使用文本溢出约束内部 div：没有最大宽度的省略号(或类似的)

同时实现渐变文本和闪光文本效果是否可行？

如何使用：has() 父 Select 器 Select 父元素的子元素，在父元素和子元素之间没有中间层的情况下？

如何使用props 为 Vue 中的组件创建动态背景图像？

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

在revealjs/Quarto中定义一类反背景的幻灯片

老虎机插槽上的 CSS 对齐问题

带有图像的 CSS 网格在 Firefox 中表现不同

紫色表示访问过的超链接

css3 nth 类型限制为类

根据背景 colored颜色反转 CSS 字体 colored颜色

为什么在 CSS3 中启用硬件加速会降低性能？

CSS3可以转换字体大小吗？

使用 CSS go 除图像之间的空间

仅使用 css 的换行符(如
)