如何用CSS让main DIV占据固定底部footer外的剩余页面垂直空间？

因为你的footer是固定定位且高度由内容自动决定，下面分两种方案给出解决办法：

纯CSS实现（依赖现代浏览器特性） #

如果你的目标浏览器支持CSS锚点定位（Chrome 119+、Edge 119+等），可以直接用以下代码：

#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  /* 给footer设置锚点标识 */
  anchor-name: --footer-anchor;
}

#main {
  /* 计算main的最小高度：视口高度减去footer的实际高度 */
  min-height: calc(100vh - anchor-size(--footer-anchor height));
  /* 预留footer的空间，避免内容被遮挡 */
  padding-bottom: anchor-size(--footer-anchor height);
  box-sizing: border-box;
}

这个方案完全不需要JS，但兼容性有限，适合只需要适配最新浏览器的场景。

兼容所有浏览器的方案（CSS+少量JS） #

如果需要兼容旧版浏览器，就用CSS加一点JS动态计算footer高度：

CSS代码 #

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

#main {
  min-height: 100%;
  /* 用CSS变量存储footer高度，后续由JS赋值 */
  padding-bottom: var(--footer-height, 0);
  box-sizing: border-box;
}

#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}

JavaScript代码 #

// 计算footer高度并设置CSS变量
function adjustMainSpace() {
  const footer = document.getElementById('footer');
  document.documentElement.style.setProperty('--footer-height', `${footer.offsetHeight}px`);
}

// 页面加载时初始化
adjustMainSpace();
// 窗口大小变化时重新计算
window.addEventListener('resize', adjustMainSpace);
// 如果footer内容会动态更新，记得在内容变化后调用adjustMainSpace()

这个方案能适配所有现代浏览器，当窗口大小改变或footer内容变化时，都会自动调整main的底部空间，确保main从顶部延伸到footer顶部，同时不会出现布局重叠。当窗口小到footer占满整个页面时，main会被推到footer上方，不会有布局问题。

内容的提问来源于stack exchange，提问作者b_yang