如何使两列布局具有等高列和一个可滚动？ [复制]答案

【问题标题】：How can I make a two-column layout have equal height columns with one scrollable? [duplicate]如何使两列布局具有等高列和一个可滚动？ [复制]
【发布时间】：2019-08-18 05:15:15
【问题描述】：

我想使用 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>

【问题讨论】：

不是 natively 使用 CSS-Grid 但有一种方法 - stackoverflow.com/questions/34194042/…
为什么这被标记为重复？这里的答案几乎可以正确解决问题，而无需依赖链接答案中的解决方案

标签： html css css-grid

【解决方案1】：

既然宽度是已知的，你可以考虑position:absolute作为内容，这样它就不会影响高度，只需使用top:0;bottom:0;拉伸它

.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>

【讨论】：