最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐
绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果:
一、经典套路
这种套路的思路是,给内容区域设置 min-height: 100%,将 footer 推到屏幕下方
然后给 footer 添加 margin-top,其值为 footer 高度的负值,就能让 footer 回到屏幕底部
HTML:
CSS:
min-height:<span style="color: #0000ff;"> 100%;
}<span style="color: #800000;">
.content
{<span style="color: #008000;">/<span style="color: #008000;"> padding-bottom 等于 footer 的高度 <span style="color: #008000;">/<span style="color: #ff0000;">
padding-bottom:<span style="color: #0000ff;"> 60px;
}<span style="color: #800000;">
.footer {<span style="color: #ff0000;">
width:<span style="color: #0000ff;"> 100%;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 60px;
<span style="color: #008000;">/<span style="color: #008000;"> margin-top 为 footer 高度的负值 <span style="color: #008000;">/<span style="color: #ff0000;">
margin-top:<span style="color: #0000ff;"> -60px;
}
的 padding、footer 的 height 和 margin, 必须保持一致
这种写法的兼容性非常好,实测 IE7 也能正常展示
但是如果页面的主体布局有其他兼容性问题,Sticky Footer 就需要做一些相应的修改
二、Flexbox
不得不说,CSS3 带来了前端的一次变革,其中 Flexbox 更是带来了网页布局的一次变革
虽然兼容性限制了 Flexbox 在国内的推广,但不可否认的是,Flexbox 是前端布局的一大趋势
HTML:
CSS:
和经典套路相比,首先是 HTML 部分,内容区域 content 不再需要 wrap 容器
然后 CSS 部分减肥成功,仅仅使用四行代码,就解决了曾经困扰了一代人的难题
而且使用 Flexbox,就不需要限定 footer 的高度,让页面布局更加灵活
当然缺点也是显而易见的,只有 IE10 及以上的浏览器才支持 flex 布局
最后,欢迎大家分享一些新的套路~
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。