• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

如何解决网页底部粘连(Stiky footer)布局问题

JAVA web前端中文站 2年前 (2018-01-30) 810次浏览 已收录 0个评论

网页底部粘连问题比较常见,群里很多网友都问到过这个问题。我这里集中分析一下该问题的解决方案。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

解决网页底部粘连(Stiky footer)布局

底部粘连其实就是网页 footer 部分的布局定位问题。常见的就是网页底部的信息,会随着内容变化。如果定位不当,会在内容过多时,它遮盖了内容;在内容过少时,它又会和内容粘连在一起。这就是著名的网页底部粘连(stiky footer)布局问题。今天我推荐使用4 种方法搞定它。

先看一下我们今天实现后的最终效果:

如何解决网页底部粘连(Stiky footer)布局问题

1、绝对定位

我们先使用绝对定位来解决这类问题。实现代码如下:

< 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"> 
</main > <footer class = "sticky" > 
web 前端中文站 www.lisa33xiaoq.net
</footer> </div >

实现方法是对(.sticky)footer 进行绝对定位,假设高度为 50px。对父级(.box)进行相对定位,将 html、body 的高度设置为 100%,父级(.box)的最小高度设置为 100%,将(.content)内容部分设置 padding-bottom 为 footer 的高度,即 50px。

2、数学表达式 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">
web 前端中文站 www.lisa33xiaoq.net 
</main > 
<footer class = "sticky" > 
</footer> </div >

由于绝对定位的实现要求最小高度 100%的效果,给 html、body 都设置为高度 100%,不利于代码扩展。因此可以使用 100vh 来代替 100%,代码会简洁很多。内容部分(.content)设置最小高度为 calc(100vh – 50px)。

3、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>

4、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 作为最新布局方式实现起来代码更加简洁。

 

web 前端点评:

通过上面的 4 种实现方式,我们可以得出只要认真学习,任何技术问题都不在是问题。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何解决网页底部粘连(Stiky footer)布局问题
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址