本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来如何让footer标签置于页面最底部,让footer标签置于页面最底部的注意事项有哪些,下面就是实战案例,一起来看一下。需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望footer能在窗口最低端。
思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留footer的高度。
html代码:
1 2 3 4 5 6 7 8 9 |
|
CSS如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
这时候,其它浏览器上都能正常显示了,但是IE 6要另外处理:
1 2 3 4 5 |
|
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
怎样让移动端的网页内容自适应
table表格中的内容溢出应该如何处理
在HTML中iframe与frame有哪些区别
以上就是如何让footer标签置于页面最底部的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《footer》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者