html上下布局，上方高度固定，下方高度自动填满

原创已于 2022-09-18 15:07:04 修改 · 439 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css #vue.js

于 2022-09-18 15:06:18 首次发布

本文介绍了一种使用CSS实现的固定头部和底部布局的方法。通过设置body的高度为100%，利用绝对定位来固定顶部和底部元素的位置，实现了简洁且响应式的页面布局。

 /* body的height必须要有 */
 body { height: 100%; padding: 0; margin: 0; } 
.outer { height: 100%; position: relative; }
.A { height: 100px; background: #BBE8F2; }
/* 注意B没有高度 */
.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }

在这里插入图片描述