怎么让div占满剩余的高度

要让`<div>`元素完全占据剩余的高度，可以采用一些CSS技巧。下面是一些常见的方法：

1. **Flex布局**:
如果你正在使用现代浏览器并且支持flexbox，你可以将包含`<div>`的容器设置为flex，并指定其为`display: flex; flex-direction: column;`. 然后给`<div>`设置`flex: 1;`，使其在高度方向上自动调整以填满剩余空间。

.container {
  display: flex;
  flex-direction: column;
}

.div-fill-height {
  flex: 1;
}

2. **Grid布局**:
同样地，如果你使用的是grid布局，将容器设为`display: grid`，并设置行高为100%。`<div>`的`grid-row: 1 / span *;`会让它填充所有剩余行。

.container {
  display: grid;
  height: 100vh;
}

.div-fill-height {
  grid-row: 1 / span 100;
}

这里`vh`代表viewport高度单位，表示视口高度的百分比。

3. **Positioning and absolute/fixed**: 使用`position: absolute`或`position: fixed`结合百分比宽度和`top: 0`, `bottom: 0`可以让`<div>`跟随屏幕底部，占据剩余高度。不过这适用于固定宽高的情况，不是响应式设计。

4. **CSS Grid 或 Flexbox 和 JavaScript**:
如果需要动态适应窗口大小，JavaScript配合resize事件也可以实现，但这会增加复杂性和维护成本。

应用上述策略后，确保目标浏览器兼容性，因为某些老版本的浏览器可能不支持某些特性。