仅用CSS实现div占满剩余屏幕空间且不出现滚动条的方法

完全可以通过纯CSS实现，无需预先知道其他元素的高度参数，推荐以下两种成熟方案：

方案1：Flex布局（兼容性最好，适用场景广） #

核心逻辑是给父容器设置纵向Flex排列，需要填充剩余空间的元素设置flex-grow: 1自动占用剩余空间。

代码示例 #

<!-- 页面结构 -->
<body>
  <header>头部导航，高度随内容自适应，无需预设</header>
  <div class="main-content">需要填充剩余空间的div</div>
  <footer>底部信息栏，高度同样无需预设</footer>
</body>

/* 全局样式重置，避免默认边距导致滚动条 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 父容器（这里是body，也可以是自定义的最外层包裹容器）设置 */
body {
  min-height: 100vh; /* 最小高度占满整个视口 */
  display: flex;
  flex-direction: column; /* 子元素纵向排列 */
}
/* 要填充剩余空间的元素设置 */
.main-content {
  flex-grow: 1; /* 核心属性：分配所有剩余空间 */
  overflow: auto; /* 内容超出时内部滚动，不会触发页面滚动条 */
}

方案2：Grid布局（代码更简洁） #

核心逻辑是利用Grid的fr分数单位自动分配剩余空间。

代码示例 #

复用上面的HTML结构，CSS修改为：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  /* 按顺序设置行高：第一行auto（内容自适应）、第二行1fr（占满剩余）、第三行auto（内容自适应） */
  grid-template-rows: auto 1fr auto;
}

注意事项 #

• 如果需要填充剩余空间的元素不是最外层容器的直接子元素，只需要给它的所有父级容器同步设置对应的Flex/Grid规则即可，逻辑完全一致。
• 若需要页面固定高度不随内容撑开，把父容器的min-height: 100vh改成height: 100vh即可。

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