stricky footer的3种处理计划方案详解

2021-03-17 12:38 jianzhan

stricky footer设计方案是最古老和最多见的实际效果之1,大家都以前历过相近的场景:

假如网页页面內容不足长的情况下,页脚块粘贴在底部;假如內容充足长时,页脚块会被內容向下消息推送。

这些天做vue+express实战演练的训练,跟随黄轶老师倒是了解了stricky footer,就用心的掌握学习培训了1下,可是前两天的难题,今日几种处理计划方案的详尽状况居然一些模糊不清,因此還是纪录下来吧!上学之路便是这样,持续地累积和反复。

上图底部的 x 就用到了經典的stricky footer,单网页页面內容充足时,它会向下消息推送;当网页页面內容沒有撑满全部显示屏时,它就固定不动在底部。

而并不是像下图这样:

 

难题

假如此前不知道道stricky footer,应用fixed固定不动在底部的话,像下图这样

position: fixed;
width: 32px;
height: 32px;
bottom: 20px;
left: calc(50% - 16px);
font-size: 32px;

那样 x 会遮盖內容,明显是不符规定的不具体的,并且不美观大方的。

因此經典的stricky footer 广为所用,可用场景也十分多,前几日回望第1次做的新项目,发现许多地区可用。

处理计划方案

stricky footer关键有3种处理计划方案,大家搭建1点简易的编码

<body>
  <div class="content"></div>
  <div class="footer"></div>
</body>

1.为內容地区加上最少的高宽比

这个方式关键是用视口vh来测算总体视窗的高宽比,随后减去底部footer的高宽比,从而得出內容地区的最少高宽比

.content{
  min-height:calc(100vh - `footer的高宽比`);
  box-sizing:border-box;
}

这类方式很简易,可是假如网页页面的footer高宽比不一样,每一个网页页面都要再次测算1次,因此其实不强烈推荐

2.应用flex合理布局

flex合理布局现如今在挪动端合理布局可以说是占据1片乾坤,广为所用。

大家一般运用flex合理布局对视窗宽度开展切分,1侧是固定不动宽度,另外一侧是自融入宽度。一样的,flex合理布局自然还可以对对视窗高宽比开展切分,footer的flex为0,这样flex得到其固有的高宽比;content的flex为1。这样它会填满去除footer的其余一部分

body{
  display:flex;
  flex-flow:column;
  min-height:100vh;
}
.content{
  flex:1;
}
.footer{
  flex:0;
}

这类方式较为强烈推荐

3.在content的外面加上1个wrapper层

这类方式也是黄轶老师应用的方式,在content的外面加上1个wrapper层包裹

<body>
  <div class="content-wrapper clearfix">
    <div class="content"></div>
  </div>
  <div class="footer"></div>
</body>

这类做法以便确保适配性,大家一般会在wrapper层上加上1个clearfix类,

html,body,.content-wrapper{
  height:100%
}
body > .content-wrapper{
  height:auto;
  min-height:100%;
}
.content{
  padding-bottom:150px //与footer的高宽比同样
}
.footer{
  position:relative;
  margin-top:⑴50px; // -`footer高宽比`
  height:150px;
  clear:both;
}
.clearfix{
  display:inline-block;
}
.clearfix{
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility: hidden;
}

这样就进行了stricky footer,这类方式也较为强烈推荐,可是添加的编码有点多,并且更改了HTML构造。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。