html - 如何使两列布局具有等高列和一个可滚动列？

标签 html css css-grid

<分区>

我想使用 CSS Grid 在两列中显示两个区域。但是，左列的高度必须与右列的高度相同。

如果左列高于右列，则左列中的内容应该是可滚动的。

我想要实现的目标:

如果不以像素为单位对高度进行硬编码，我将无法做到这一点。是否可以仅通过 CSS 来做到这一点？或者我需要使用 JavaScript 重新计算左栏高度？

我附上jsFiddle来看看

https://jsfiddle.net/rafalcypcer/2teonuhy/17/

谢谢，

拉法尔

.gridwrapper {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-auto-rows: 200px;
  grid-gap: 10px;
  grid-template-rows: auto;
}

.column {
  background: green;
}

.dynamic-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: pink;
  margin: 20px;
}

.list {
  overflow-y: auto;
  margin: 20px;
  height: 100%;
}

.item {
  height: 50px;
  background: yellow;
  border: 2px solid black;
}

<div class="gridwrapper">
      <div class="column">
        <div class="list">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
  </div>
  <div class="column">
    <div class="dynamic-content">Some dynamic content with random height</div>
  </div>
</div>

最佳答案

由于宽度已知，您可以考虑 position:absolute对于内容，因此它不会影响高度并使用 top:0;bottom:0; 简单地拉伸(stretch)它

.gridwrapper {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-auto-rows: 200px;
  grid-gap: 10px;
  grid-template-rows: auto;
}

.column {
  background: green;
  position:relative;
}

.dynamic-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: pink;
  margin: 20px;
}

.list {
  position:absolute;
  overflow-y: auto;
  margin: 20px;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.item {
  height: 50px;
  background: yellow;
  border: 2px solid black;
}

<div class="gridwrapper">
      <div class="column">
        <div class="list">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
        </div>
  </div>
  <div class="column">
    <div class="dynamic-content">Some dynamic content with random height</div>
  </div>
</div>

关于html - 如何使两列布局具有等高列和一个可滚动列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55380570/

上一篇：javascript - 如何防止嵌入的字体在加载后滚动

下一篇：html - 任何属性的 '.' CSS 选择器等价于什么？

相关文章：

javascript - 翻转效果 : flip div one by one

css - 如何在IE8+GWT中实现多背景图片效果

javascript - CSS - 相对于父容器大小的空彩色容器

javascript - 如何制作整页的JS和CSS菜单

css - 随着元素数量的增加更改网格中的列数和行数

具有 2 行、4 列、7 个元素的 CSS 网格。如何使第二行居中？

css - 将响应式网格限制为最多 2 列？

html - h :selectOneMenu? 渲染的选择元素的默认大小是多少

php - 我怎样才能开发动态的HTML

html - <窗体>是否中断高度 :100%?