创建一个自适应高度的布局，可以使用 CSS 的一些技术来实现。下面是一种常见的方法：
1、使用父级容器设置为 display: flex;，这将创建一个 flex 容器。
2、在父级容器中，使用 flex-direction: column; 将子元素垂直排列。
3、使用子元素的 flex-grow: 1; 来使其自适应剩余空间。
4、根据需要，可以设置子元素的 min-height 或 max-height 来限制高度。
以下是一个示例代码，展示了如何使用这些技术创建自适应高度的布局：
<!DOCTYPE html>
<html>
<head>
<title>自适应高度布局</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 400px;
border: 1px solid #ccc;
}.header {
background-color: #f0f0f0;
padding: 10px;
}.content {
flex-grow: 1;
padding: 10px;
overflow-y: auto; /* 添加滚动条，可根据需要设置 */
}.footer {
background-color: #f0f0f0;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="content">
Content (自适应高度)
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
在上述示例中，.container 类设置了 display: flex; 和 flex-direction: column;，使其成为一个垂直排列的 flex 容器。.header 和 .footer 分别是容器的顶部和底部区域，它们的高度由内容决定。.content 类使用 flex-grow: 1;，使其占据剩余的高度并自适应。
通过设置 .container 的 height 属性，可以限制容器的高度。根据需要，可以将其更改为具体的像素值或百分比，或者使用其他技术来实现更复杂的自适应布局。
请注意，.content 的 overflow-y: auto; 属性可以添加垂直滚动条，以防止内容溢出容器。
通过使用这种方法，你可以创建一个自适应高度的布局，其中内容区域会根据容器的高度自动调整。