兰颜的博客

页脚固定在底部，中间内容高度自适应

效果：代码： <div class="flex h-full items-center justify-around login-wrap"> <el-card class="box-card"> <div class="tyg-div-form"> <h2 style="text-align: center; font-size:22px;" class="mb-4">欢迎访问 官网后台</h2> &lt.

html和body的高度并不一定相同，在内容少的时候，body的高度要小于html，当然这只会出现在body中的内容所占的空间高度小于浏览器的视口高度的时候，此时html的高度大于body的高度。网页中的元素都是以body最为参考，所以有必要保持html和body的高度相同。html,body{height:100%;}1. 第一种方法在body中使用两个容器，包括网页的页脚和另外一部分（container）。设置container的高度为100%；页脚部分使用 负外边距 保持其总是在最下方。