快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

CSS如何实现StickyFooter

这篇文章主要介绍了CSS如何实现Sticky Footer，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

目前创新互联已为1000多家的企业提供了网站建设、域名、虚拟空间、成都网站托管、企业网站设计、明山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。

CSS如何实现Sticky Footer

实现

方法

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

这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则随之推出的效果。


  
      content
    
  
   html, body {   height: 100%;   margin: 0; } .wrapper {   min-height: 100%;   /* 等于footer的高度 */   margin-bottom: -50px; } .footer, .push {   height: 50px; }

这个方法需要容器里有额外的占位元素（如.push）

需要注意的是.wrapper的margin-bottom值需要和.footer的负的height值保持一致，这一点不太友好。

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

既然能在容器上使用负的margin bottom，那能否使用负margin top吗？当然可以。

给内容外增加父元素，并让内容部分的底部内边距与页脚高度的值相等。


  
    
      content
    
      html, body {   height: 100%;   margin: 0; } .content {   min-height: 100%; } .content-inside {   padding: 20px;   padding-bottom: 50px; } .footer {   height: 50px;   margin-top: -50px; }

不过这种方法和上一种一样，都需要额外添加不必要的html元素。

3. 使用flexbox弹性盒布局

以上三种方法的footer高度都是固定的，通常来说这不利于网页布局：内容会改变，它们都是弹性的，一旦内容超出固定高度就会破坏布局。所以给footer使用flexbox吧，让它的高度可以变大变小变漂亮~（≧∇≦）


  
    content
  
  
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

你还可以在上面添加header或在下面添加更多元素。可从以下技巧选择其一：

  1. flex: 1 使内容（如：.content）高度可以自由伸缩

  2. margin-top: auto

请记住，我们有《Flexbox完整指南（英） 》呢～

4. absolute

通过绝对定位处理应该是常见的方案，只要使得页脚一直定位在主容器预留占位位置。


    
    
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 一致。

5. calc

通过计算函数 calc 计算（视窗高度 - 页脚高度）赋予内容区最小高度，不需要任何额外样式处理，代码量最少、最简单。


    
    
.content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}

如果不需考虑 calc() 以及 vh 单位的兼容情况，这是个很理想的实现方案。同样的问题是 footer 的高度值需要与 content 其中的计算值一致。

6. table

通过 table 属性使得页面以表格的形态呈现。


    
    
html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

需要注意的是，使用 table 方案存在一个比较常见的样式限制，通常 margin、padding、border 等属性会不符合预期。笔者不建议使用这个方案。当然，问题也是可以解决的：别把其他样式写在 table 上。

7. 使用Grid网格布局

grid比flexbox还要新很多，并且更佳很简洁，我们同样有《Grid完整指南（英） 》奉上～


  
    content
  
  
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版本。

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS如何实现Sticky Footer”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


新闻标题：CSS如何实现StickyFooter
标题来源：http://6mz.cn/article/pspsge.html

其他资讯