請考慮以下情況。我有一個溢出的自動div，它的內容超出了它的高度。然后我有一個絕對位置div(紅色背景),我想運行可滾動div的整個高度。換句話說，我希望它延伸到文本停止的底部，但現在它只在最初可見的文本底部停止。換句話說，紅色的div。b)延伸到滾動距離的底部。我能用CSS做這件事嗎？

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  height: 100%;
  position: absolute; 
  top: 0;
  width: 10px;
  background: red;
}

<div class="a">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  <div class="b"></div>
</div>

你現在結構的問題是a的高度固定在80vh，b的高度是a的100%，也就是說80vh。

如果您愿意稍微更改HTML，您可以通過允許的高度為auto(默認)并將包裝在具有溢出滾動的固定高度的容器元素中來解決此問題。這樣，a的高度將是內容的全高，b的高度也將是內容的全高。

這里有一個例子:

.container {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.a {
  position: relative;
}

.b {
  height: 100%;
  position: absolute;
  top: 0;
  width: 10px;
  background: red;
}

<div class="container">
  <div class="a">
    test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
    <div class="b"></div>
  </div>
</div>

一種可能的方法是使用網格并設置grid-row，見下面的例子，現在沒有重構

.a {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  height: 80vh;
  width: 200px;
  overflow-y: auto;
}

.b {
  position: absolute;
  grid-row: 1/1;
  height: 100%;
  width: 10px;
  background: red;
}

<div class="a">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  test test test test test test test test test test test test test test test test test test test test test
  <div class="b"></div>
</div>

添加最小高度:100%到你的div，并設置高度:自動。這將拉伸你的顏色到全高，但也會隨著你的文本超過100%的高度而增長。

一個有粘性位置的想法，但它只有在你知道高度值的情況下才有效，因為你需要它作為頁邊距

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
}

.b {
  height: 100%;
  margin-top: -80vh; /* you need the opposite of height here */
  position: sticky; 
  bottom: 0;
  width: 10px;
  background: red;
}

<div class="a">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  <div class="b"></div>
</div>