本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云
网页底部粘连问题比较常见,群里很多网友都问到过这个问题。我这里集中分析一下该问题的解决方案。
底部粘连其实就是网页footer部分的布局定位问题。常见的就是网页底部的信息,会随着内容变化。如果定位不当,会在内容过多时,它遮盖了内容;在内容过少时,它又会和内容粘连在一起。这就是著名的网页底部粘连(stiky footer)布局问题。今天我推荐使用4种方法搞定它。
先看一下我们今天实现后的最终效果:
绝对定位
我们先使用绝对定位来解决这类问题。实现代码如下:
<style> html,body{height:100%} body{margin:0} .box{position:relative;background-color:lightblue;min-height:100%;} .content{padding-bottom:50px;} .sticky{position:absolute;background-color:lightgreen;width:100%;height:50px;bottom:0;} </style> <div class="box"> <main class="content"> 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com ... </main> <footer class="sticky"></footer> </div>
实现方法是对(.sticky)footer进行绝对定位,假设高度为50px。对父级(.box)进行相对定位,将html、body的高度设置为100%,父级(.box)的最小高度设置为100%,将(.content)内容部分设置padding-bottom为footer的高度,即50px。
数学表达式calc
数学表达式calc()是CSS中的函数,主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。下面我们使用数学表达式calc来解决底部粘连(stiky footer)布局问题。
<style> body{margin:0} .content{background-color:lightblue;min-height: calc(100vh - 50px)} .sticky{background-color:lightgreen;height:50px;} </style> <div class="box"> <main class="content"> 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com 业余草:www.xttblog.com </main> <footer class="sticky"></footer> </div>
由于绝对定位的实现要求最小高度100%的效果,给html、body都设置为高度100%,不利于代码扩展。因此可以使用100vh来代替100%,代码会简洁很多。内容部分(.content)设置最小高度为calc(100vh – 50px)。
flex 布局
上面的代码中,如果sticky的底部高度发生了变化,则内容部分的代码也需要进行相应地调整。如果使用flex,则可以更加灵活。为父级(.box)设置flex、上下排列及最小高度为100vh,为内容部分(.content)设置flex:1。
<style> body{margin:0} .box{display:flex;flex-flow:column;min-height:100vh; background-color:lightblue;} .content{flex:1;} .sticky{background-color:lightgreen;height:50px;} </style>
grid栅格布局
Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格。
<style> body{margin:0} .box{display:grid;grid-template-rows:1fr 50px;min-height:100vh;} .content{background-color:lightblue;} .sticky{background-color:lightgreen;} </style>
grid作为最新布局方式实现起来代码更加简洁。
通过上面的4种实现方式,我们可以得出只要认真学习,任何技术问题都不在是问题。
最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!
本文原文出处:业余草: » 解决网页底部粘连(Stiky footer)布局问题