黑松山资源网 Design By www.paidiu.com
什么是sticky footer布局?
我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时,页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。是不是很容易理解。不理解的小伙伴也没关系下面我就举个简单的例子。
一般指手机页面中,当内容高度撑不满一屏时,页脚紧贴屏幕底部;当内容高度超过一屏时,页脚紧随其后。
方法一:flex弹性盒子布局
- 父容器container的display为flex,并规定项目排列顺序是纵向的
- content元素的flex为1,即有多余空间就增大
- footer定义一个高度
查看演示请狠狠地点击:flex弹性盒子布局实现sticky footer
<div class="container"> <div class="content">内容</div> <div class="footer">页脚</div> </div>
body { margin: 0; } .container { display: flex; flex-direction: column; min-height: 100vh; } .content { flex: 1; /*非必须*/ width: 100%; height: 300px; line-height: 300px; text-align: center; color: #fff; font-size: 30px; font-weight: bold; background-color: #71a8da; /*非必须*/ } .footer { height: 60px; /*非必须*/ width: 100%; line-height: 60px; text-align: center; color: #fff; font-size: 30px; font-weight: bold; background-color: #f85f2f; /*非必须*/ }
方法二:padding-bottom+负margin-top
- 容器wrapper需要指定min-height为100vh(vh:视窗高度)
- 内容写在content容器里,指定padding-bottom为footer容器的高度
- footer指定高度和margin-top,并且margin-top为高度的负值
查看演示请狠狠地点击:padding-bottom+负margin-top实现sticky footer
<div class="wrapper"> <div class="content">内容</div> </div> <div class="footer">页脚</div>
body { margin: 0; } .wrapper { width: 100%; min-height: 100vh; } .content { /*padding-bottom应等于footer的高度*/ padding-bottom: 60px; /*非必须*/ width: 100%; height: 400px; line-height: 400px; text-align: center; color: #fff; font-size: 30px; font-weight: bold; background-color: #71a8da; /*非必须*/ } .footer { /*margin-top应等于footer高度的负值*/ margin-top: -60px; height: 60px; /*非必须*/ width: 100%; line-height: 60px; text-align: center; color: #fff; font-size: 30px; font-weight: bold; background-color: #f85f2f; /*非必须*/ }
提示:两个/**非必须**/
之间的部分不是实现sticky footer布局的必要代码,只是一些辅助样式,可以删除
到此这篇关于css sticky footer经典布局的实现的文章就介绍到这了,更多相关css sticky footer内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《神话时代:重述版》评测:粉丝们的朝花夕拾
- 战锤40K星际战士2先锋职业介绍|先锋职业技能效果一览
- 战锤40K星际战士2重装职业介绍|重装职业技能效果一览
- 交错战线能源发电站推荐角色一览
- 阿波罗乐神之音《第4集出埃及记》[WAV+CUE]
- JohnWrightTrio-SouthSideSoul-1960-2024(24-192)
- AnthonyBruno-Cefalu(2024)[24-96]
- 《地狱潜者2》玩家人数飙升:终于不再削弱玩家了
- 黑神话引力!外媒分享孙悟空英文书籍:美生中国人等
- 《荒野大镖客》PC版曝光!《GTA6》疑似也有PC版
- 林宥嘉.2008-神秘嘉宾(引进版)【华研国际】【WAV+CUE】
- 徐小凤.1997-金曲精选(康艺经典珍藏系列)【康艺成音】【WAV+CUE】
- 群星.1994-非常精丫宝丽金】【WAV+CUE】
- 《赛马娘 热血喧闹大感谢祭!》评测:现代复古派对
- 《星球大战:亡命之徒》评测:还是看看远方的光剑吧