CSS完成Sticky Footer的示例编码

日期:2021-03-01 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

所谓 “Sticky Footer”,其实不是甚么新的前端开发定义和技术性,它指的便是1种网页页面实际效果:假如网页页面內容不够够长时,页脚固定不动在访问器对话框的底部;假如內容充足长时,页脚固定不动在网页页面的最底部。但假如网页页面內容不足长,置底的页脚就会维持在访问器对话框底部。

完成

方式

1. 将內容一部分的底部外边距设为负数

这是个较为流行的用法,把內容一部分最少高宽比设为100%,再运用內容一部分的负底部外边距值来做到当高宽比不满时,页脚维持在对话框底部,当高宽比超过则随之推出的实际效果。

<body>
  <div class="wrapper">
      content
    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  /* 等于footer的高宽比 */
  margin-bottom: ⑸0px;
}
.footer,
.push {
  height: 50px;
}

这个方式必须器皿里有附加的占位元素(如.push)

必须留意的是.wrapper的margin-bottom值必须和.footer的负的height值维持1致,这1点不太友善。

2. 将页脚的顶部外边距设为负数

既然能在器皿上应用负的margin bottom,那能否应用负margin top吗?自然能够。

给內容外提升父元素,并让內容一部分的底部内边距与页脚高宽比的值相同。

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: ⑸0px;
}

但是这类方式和上1种1样,都必须附加加上无须要的html元素。

3. 应用flexbox延展性盒合理布局

以上3种方式的footer高宽比全是固定不动的,一般来讲这不好于网页页面合理布局:內容会更改,它们全是延展性的,1旦內容超过固定不动高宽比就会破坏合理布局。因此给footer应用flexbox吧,让它的高宽比能够增大缩小变好看~(≧∇≦)

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

你还能够在上面加上header或在下面加上更多元化素。可从下列技能挑选其1:

  1. flex: 1 使內容(如:.content)高宽比能够随意伸缩
  2. margin-top: auto

请记牢,大家有《Flexbox详细指南(英) 》呢~

4. absolute

根据肯定精准定位解决应当是普遍的计划方案,要是使得页脚1直精准定位在主器皿预留占位部位。

<div class="wrapper">
    <div class="content"><!-- 网页页面行为主体內容地区 --></div>
    <div class="footer"><!-- 必须保证 Sticky Footer 实际效果的页脚 --></div>
</div>html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

这个计划方案需特定 html、body 100% 的高宽比,且 content 的 padding-bottom 必须与 footer 的 height 1致。

5. calc

根据测算涵数 calc 测算(视窗高宽比 - 页脚高宽比)授予內容区最少高宽比,不必须任何附加款式解决,编码量至少、最简易。

<div class="wrapper">
    <div class="content"><!-- 网页页面行为主体內容地区 --></div>
    <div class="footer"><!-- 必须保证 Sticky Footer 实际效果的页脚 --></div>
</div>.content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}

假如不需考虑到 calc() 和 vh 企业的适配状况,这是个很理想化的完成计划方案。一样的难题是 footer 的高宽比值必须与 content 在其中的测算值1致。

6. table

根据 table 特性使得网页页面以报表的形状展现。

<div class="wrapper">
    <div class="content"><!-- 网页页面行为主体內容地区 --></div>
    <div class="footer"><!-- 必须保证 Sticky Footer 实际效果的页脚 --></div>
</div>html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

必须留意的是,应用 table 计划方案存在1个较为普遍的款式限定,一般 margin、padding、border 等特性会不符预期。笔者不提议应用这个计划方案。自然,难题也是能够处理的:别把别的款式写在 table 上。

7. 应用Grid网格合理布局

grid比flexbox还要新许多,而且更佳很简约,大家一样有《Grid详细指南(英) 》奉上~

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

遗憾的是,网格合理布局(Grid layout)现阶段仅适用Chrome Canary和Firefox Developer Edition版本号。

总结

以上几种完成计划方案,笔者都在新项目中尝试过,每一个完成的方式实际上大同市小异,另外也都有自身的利与弊。在其中有的计划方案存在限定性难题,必须固定不动页脚高宽比;在其中有的计划方案必须加上附加的元素或必须 Hack 方式。同学们能够依据网页页面实际要求,挑选最合适的计划方案。

自然,技术性是持续升级的,或许也有许多不一样的、更好的计划方案。但坚信大伙儿最后目全是1样的,以便更好的客户体验!

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

上一篇:根据css应用background 返回下一篇:没有了