为了解决这个问题，你可以使用 CSS 的 Flexbox 布局。下面是一个简单的示例，展示了如何创建一个自适应高度的外层 div，其中包含一个高度为 300px 的 div 和另一个填充剩余高度的 div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fill Remaining Height Example</title>
<style>.outer-div {display: flex; /* 使用 Flexbox 布局 */flex-direction: column; /* 子元素垂直排列 */height: 100vh; /* 外层 div 高度设置为视口的 100%，你也可以根据需要设置为其他值 */}.fixed-height-div {height: 300px; /* 固定高度为 300px */background-color: lightblue; /* 为了可视化效果，设置背景颜色 */}.remaining-height-div {flex: 1; /* 填充剩余空间 */background-color: lightgreen; /* 为了可视化效果，设置背景颜色 */}
</style>
</head>
<body>
<div class="outer-div"><div class="fixed-height-div">Fixed Height Div (300px)</div><div class="remaining-height-div">Remaining Height Div</div>
</div>
</body>
</html>
在这个示例中，.outer-div 是外层容器，它使用了 Flexbox 布局（display: flex）并且设置了 flex-direction: column 以使子元素垂直排列。外层容器的高度被设置为视口的 100%（height: 100vh），但你可以根据需要调整这个值。
.fixed-height-div 是具有固定高度（300px）的内部 div，而 .remaining-height-div 是另一个内部 div，它使用 flex: 1 属性来填充剩余的空间。flex: 1 告诉 Flexbox 让这个元素占据所有可用的额外空间。
