如何用CSS和JavaScript根据屏幕分辨率设置div可变高度

嘿，这个需求太常见了！我给你整理了几个前端圈里常用的靠谱方案，你可以根据自己的项目环境挑着用：

这是目前最主流的实现方式，代码量少，兼容性也不错（除了极老的IE）。核心思路是把父容器设置成垂直方向的Flex布局，让动态高度的div自动填充剩余空间。

代码示例：

<!-- HTML结构 -->
<div class="container">
  <div class="static" style="height:300px;width:100%"></div>
  <div class="dynamic"></div>
</div>

/* CSS样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* 确保根元素占满视口高度 */
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 用min-height避免内容超出时容器被截断 */
}
.dynamic {
  flex: 1; /* 关键属性：自动填充剩余空间 */
}

小贴士：如果页面有顶部固定导航栏之类的元素，记得把min-height的数值减去导航栏的高度，比如min-height: calc(100vh - 60px)

Grid布局同样能轻松实现这个需求，语法直观，适合已经在使用Grid的项目。

代码示例：

<!-- HTML结构和上面一致 -->
<div class="container">
  <div class="static" style="height:300px;width:100%"></div>
  <div class="dynamic"></div>
</div>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container {
  display: grid;
  grid-template-rows: 300px 1fr; /* 第一行固定300px，第二行占剩余所有空间 */
  min-height: 100vh;
}

如果你的项目需要兼容IE11这类老浏览器，这个方法就很合适。直接用calc()计算动态div的高度，减去静态div的固定高度。

代码示例：

<!-- HTML结构不变 -->
<div class="static" style="height:300px;width:100%"></div>
<div class="dynamic"></div>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.dynamic {
  height: calc(100vh - 300px); /* 视口高度减去静态div的高度 */
}

注意：如果body有默认的margin，记得先清零，不然会出现不必要的滚动条

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