css实现上下固定中间自适应

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

要实现一个元素在页面上部固定，底部固定，上下自适应中间内容的布局，可以使用CSS的Flexbox布局。以下是实现这种布局的示例代码：

HTML:




<div class="container">
  <div class="header">Header Content</div>
  <div class="content">Middle Content</div>
  <div class="footer">Footer Content</div>
</div>

CSS:




.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full height of the viewport */
}
 
.header {
  height: 50px; /* 固定头部的高度 */
  background: lightblue;
}
 
.content {
  flex-grow: 1; /* 自适应中间部分 */
  background: lightgreen;
}
 
.footer {
  height: 50px; /* 固定底部的高度 */
  background: lightcoral;
}

这段代码会创建一个容器，其中.header和.footer的高度固定，而.content会根据剩余空间自适应高度。

css实现上下固定中间自适应

评论已关闭

推荐阅读