如何使页脚与VP的结尾相遇？

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px; /* 根据需求设置页脚高度 */
}

<div class="container">
  <div class="content">页面内容</div>
  <footer>页脚内容</footer>
</div>

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex-grow: 1;
}

footer {
  height: 50px; /* 根据需求设置页脚高度 */
}

<div class="content">页面内容</div>
<footer>页脚内容</footer>

<script>
  function alignFooter() {
    const contentHeight = document.querySelector('.content').offsetHeight;
    const viewportHeight = window.innerHeight;
    const footer = document.querySelector('footer');
    const footerHeight = footer.offsetHeight;
    
    if (contentHeight + footerHeight < viewportHeight) {
      footer.style.position = 'fixed';
      footer.style.bottom = '0';
    } else {
      footer.style.position = 'static';
    }
  }

  window.addEventListener('DOMContentLoaded', alignFooter);
  window.addEventListener('resize', alignFooter);
</script>