如何在滾動容器內拉伸全高div？-有解無憂

我希望div.line像下面的代碼這樣的黑色邊框在容器滾動中具有全高。
當有一個元素太長時，例如第 4 行，邊框將被縮短，直到最后沒有高度。
有沒有辦法讓滾動容器內的元素始終與最高元素的高度相同？感謝大家！

.container {
  display: flex;
  align-items: stretch;
  height: 300px;
  overflow: auto;
}

.line {
  width: calc(100% / 4);
  border-left: 1px solid #000;
  padding: 0 16px;
}

.item {
  height: 100px;
  background: blue;
  color: white;
  padding: 16px;
}

.line:nth-child(2) .item {
  height: 200px;
}

.line:nth-child(4) .item {
  height: 600px;
}

<div class="container">
  <div class="line">
    <div class="item">1</div>
  </div>
  <div class="line">
    <div class="item">2</div>
  </div>
  <div class="line">
    <div class="item">3</div>
  </div>
  <div class="line">
    <div class="item">4</div>
  </div>
</div>

uj5u.com熱心網友回復：

由于您的.linediv 還包含一個專案，因此您還需要將它們設定為 flexbox，然后使專案增長到完整高度。像這樣的東西：

.container {
  display: flex;
  align-items: stretch;
  height: 300px;
  overflow: auto;
}

.line {
  width: calc(100% / 4);
  border-left: 1px solid #000;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
}

.item {
  background: blue;
  color: white;
  padding: 16px;
  flex-grow: 1;     
}

.line:nth-child(2) .item {
  height: 200px;
}

.line:nth-child(4) .item {
  height: 600px;
}

<div class="container">
  <div class="line">
    <div class="item">1</div>
  </div>
  <div class="line">
    <div class="item">2</div>
  </div>
  <div class="line">
    <div class="item">3</div>
  </div>
  <div class="line">
    <div class="item">4</div>
  </div>
</div>

基本上就是這樣。

uj5u.com熱心網友回復：

如果我說對了，那么

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Scroll flex</title>
    <style>
      .another-container {
        height: 300px;
        overflow-y: scroll;
      }
      .container {
        display: flex;
      }
      .line {
        width: calc(100% / 4);
        border-left: 1px solid #000;
        padding: 0 16px;
      }
      .item {
        height: 100px;
        background: blue;
        color: white;
        padding: 16px;
      }
      .line:nth-child(2) .item {
        height: 200px;
      }
      .line:nth-child(4) .item {
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div class="another-container">
      <div class="container">
        <div class="line">
          <div class="item">1</div>
        </div>
        <div class="line">
          <div class="item">2</div>
        </div>
        <div class="line">
          <div class="item">3</div>
        </div>
        <div class="line">
          <div class="item">4</div>
        </div>
      </div>
    </div>
  </body>
</html>

正如@XiaoGuang 指出的那樣，您的解決方案無法按預期作業，因為您明確設定了 flex 容器的高度。任何彈性專案都不能大于容器本身。所以第一步是移除 height 屬性，讓 flex 容器變得和最高的 flex 項一樣高。之后，如果您仍然需要滾動，只需為此添加另一個容器。

uj5u.com熱心網友回復：

在這種情況下，您應該使用grid而不是flex。查看代碼中的注釋以獲取更多詳細資訊。

.container {
  display: grid; /* change to grid */
  grid-template-columns: repeat(4, 1fr); /* create 4 columns */
  height: 300px;
  overflow: auto;
}

.line {
  width: calc(100% - 16px * 2); /* full width column */
  border-left: 1px solid #000;
  padding: 0 16px;
}

.item {
  height: 100px;
  background: blue;
  color: white;
  padding: 16px;
}

.line:nth-child(2) .item {
  height: 200px;
}

.line:nth-child(4) .item {
  height: 600px;
}

<div class="container">
  <div class="line">
    <div class="item">1</div>
  </div>
  <div class="line">
    <div class="item">2</div>
  </div>
  <div class="line">
    <div class="item">3</div>
  </div>
  <div class="line">
    <div class="item">4</div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436787.html

標籤：html css

上一篇：如何在CSS中重疊元素？

下一篇：我將如何創建按鈕以使它們與所有其他按鈕保持一致？