使页脚停留在页面底部(不固定到底部)

html, body {
  height: 100%;
  margin: 0;
}

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

.content {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}

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

function adjustFooterPosition() {
  const container = document.querySelector('.container');
  const content = document.querySelector('.content');
  const footer = document.querySelector('.footer');
  
  const containerHeight = container.offsetHeight;
  const contentHeight = content.offsetHeight;
  const footerHeight = footer.offsetHeight;
  const viewportHeight = window.innerHeight;
  
  if (containerHeight < viewportHeight) {
    const remainingHeight = viewportHeight - containerHeight;
    const contentMinHeight = contentHeight + remainingHeight - footerHeight;
    content.style.minHeight = `${contentMinHeight}px`;
  }
}

window.addEventListener('resize', adjustFooterPosition);

.footer {
  position: sticky;
  bottom: 0;
}