DIV 填空剩余高度

在HTML中，`<div>`元素通常用于创建块级元素并划分网页布局。当你想要一个`<div>`自适应其内容的高度，并填满剩余可用空间时，可以利用CSS的灵活性来实现。这里有一个基本的方法：

.parent-container {
  display: flex; /* 或者使用 grid 如果需要两维布局 */
  height: 100%; /* 设置父容器的高度为100%，通常是包含它的视口高度 */
  position: relative;
}

.child-div {
  flex: 1; /* 使用flex-grow属性设置子元素填充剩余空间，默认值为0 */
  overflow: auto; /* 添加滚动条，以便内容超出部分可见 */
}

在这个例子中，`.parent-container` 是包含`<div class="child-div">`的父元素。`.child-div`设置了`flex: 1`，这意味着它将自动增长并占用剩余的空间，直到达到父元素的大小。

如果你想要在JavaScript中动态处理这种情况，可以在页面加载完成后计算剩余高度并设置到`<div>`上，但一般来说，这样的需求更适合用CSS来解决。