HTML上面div固定高度，下面自适应高度
warning:
这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。
要实现在HTML中上面的div具有固定高度，而下面的div自适应高度的布局，你可以使用CSS的Flexbox布局模型。以下是实现这种布局的示例代码：
HTML:
<div class="container">
<div class="fixed-div">固定高度的Div</div>
<div class="auto-div">自适应高度的Div</div>
</div>CSS:
.container {
display: flex;
flex-direction: column;
}
.fixed-div {
height: 200px; /* 你可以设置为任何固定的高度 */
background-color: lightblue;
}
.auto-div {
flex-grow: 1;
background-color: lightgreen;
}在这个例子中，.container 是一个flex容器，并且它的子元素 .fixed-div 是固定高度的，而 .auto-div 会自动占据所有剩余的空间。通过设置 .auto-div 的 flex-grow 属性为1，它会扩展以填充任何剩余的空间。
评论已关闭