如何使DIV在滚动后伸展到页面底部

<style>
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px; /* 或者使用 min-height 属性 */
    background-color: #f5f5f5;
  }
</style>

<div class="content">这是页面内容</div>
<div class="footer">这是底部DIV</div>

<style>
  .footer {
    width: 100%;
    height: 100px; /* 或者使用 min-height 属性 */
    background-color: #f5f5f5;
  }
</style>

<script>
  window.addEventListener('scroll', function() {
    var footer = document.querySelector('.footer');
    var scrollHeight = window.innerHeight + window.pageYOffset;
    var documentHeight = document.documentElement.offsetHeight;
    if (scrollHeight >= documentHeight) {
      footer.style.height = (scrollHeight - documentHeight + footer.offsetHeight) + 'px';
    } else {
      footer.style.height = '100px'; // 恢复原始高度
    }
  });
</script>

<div class="content">这是页面内容</div>
<div class="footer">这是底部DIV</div>