HTML上面div固定高度，下面自适应高度

作者：System 时间：2024年08月21日分类：所有,css3 字数：595

这篇文章距离上次修改已过435天，其中的内容可能已经有所变动。

要实现在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，它会扩展以填充任何剩余的空间。

HTML上面div固定高度，下面自适应高度

评论已关闭

推荐阅读