Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)_html/css_WEB-ITnose
程序员文章站
2022-05-01 23:32:08
...
你会发现，页脚的高度在这里被重复使用了三次，这是至关重要的，而且三个高度必须使用同样的值。wrap
的height属性把自己拉伸至窗口全部高度的尺寸，负的margin会把footer提高到main
的padding的位置上去，因为main已经在wrap的里面，所以main的padding已经是wrap 100%高度的一部分。 这样，footer就留在页面的底部了。
现在还不算完成，我们还需要去clearfix main
。
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
作者信息
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论