如何根据屏幕高度减去绝对定位元素高度设置div高度？

嘿，你遇到的这个问题刚好是现代CSS布局擅长解决的场景，完全不用写一堆媒体查询或者硬编码页脚高度来用calc()！下面给你两种最靠谱的实现方式：

方法一：Flexbox 布局（最推荐） #

Flexbox 天生就是为这种“剩余空间分配”的场景设计的，步骤超简单：

1. 把你的100vh面板设置为 display: flex 和 flex-direction: column，让子元素垂直排列
2. 给内容div设置 flex: 1，它会自动占据面板除页脚外的所有剩余空间
3. 页脚不用设置绝对定位，正常放置就行，它会自适应自己的高度，内容区会自动调整

代码示例：

<div class="panel">
  <div class="content">你的自有内容</div>
  <footer class="footer">动态高度的页脚内容</footer>
</div>

.panel {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* 如果需要的话可以加overflow防止内容溢出 */
  overflow: hidden;
}

.content {
  flex: 1;
  /* 内容过多时可以加滚动 */
  overflow-y: auto;
}

.footer {
  /* 这里不用设置position:absolute，正常写样式就行，高度会自适应 */
  background: #eee;
  padding: 1rem;
}

方法二：Grid 布局 #

Grid 同样能轻松实现这个需求，逻辑和Flexbox类似：

1. 面板设置为 display: grid，并通过 grid-template-rows: 1fr auto 定义行高——第一行占剩余空间，第二行自适应页脚高度
2. 内容div和页脚直接放在面板里，不用额外定位

代码示例：

.panel {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

.content {
  overflow-y: auto;
}

.footer {
  background: #eee;
  padding: 1rem;
}

为什么这两种方法比calc()好？ #

• 完全不用关心页脚的具体高度，不管它随窗口宽度怎么变，内容区都会自动填满剩余空间
• 代码更简洁，没有硬编码的数值，维护起来更轻松
• 避免了绝对定位可能带来的布局重叠问题（比如页脚内容过多时会盖住内容区的情况）

如果因为某些特殊需求必须保留页脚的position:absolute，那你可以用JavaScript监听窗口 resize 事件，动态计算内容区的高度，但这种方法不如CSS布局优雅，除非万不得已不推荐用。

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