本文摘自PHP中文网,作者V,侵删。
css让页脚固定在底部的方法:首先保证页面中的html、body、container满足【height:100%】;然后使用相对定位【bottom:0】将footer固定在页面底部即可。
本教程操作环境:windows10系统、css3版,该方法适用于所有品牌电脑。
原理分析:
(学习视频分享:css视频教程)
页面中的 html , body , container 都必须满足 height:100% ,这样就可以占满整个屏幕(页面), footer 使用相对定位 bottom:0 ,固定在页面底部,页面主体 page 容器必须要设置一个大于等于 footer 高度的 padding-bottom ,目的就为了将 footer 的高度计算在 page 容器中,这样一来footer 就会始终固定在页面底部了。
实现:
HTML
1 2 3 4 5 6 7 8 9 |
|
这里唯一需要注意的就是, footer 容器是被 container 容器包含在内的。
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者