使用Flexbox实现Sticky footer

Sticky footers设计是最古老和最常见的效果之一。做项目时,我们经常会碰到它:当页面不足一屏幕时,footer能固定在视窗底部。当页面大于一屏幕时,footer能够被自动推下去。

在现在浏览器中,我们可以放心大胆的使用Flexbox实现Sticky footer。使用Flexbox,我们仅仅需要几行css代码,就能完美实现,而不需要做一些计算。

假设,我们的页面结构是这样的。

<body>
    <header>头部,高度确定</header>
    <main>主体部分,高度不确定</main>
    <footer>底部,高度确定</footer
</body>

现在,需要实现sticky footer效果,那么,首先,我们需要给body添加一些样式:

body {
        display: flex;
        flex-flow: column;
        min-height: 100vh;
}

display:flex保证body是flexbox布局。flex-flow:column。使得子元素是纵向排列的。min-height:100vh;使得main高度不够时,body至少还有一个视窗的高度。

      main {
        flex:1;
      }

然后我们设置main的css样式,flex:1。意思是,如果body是一视窗高度,去掉header和footer所占的高度后,剩下都归main所有。

如果一来,我们就实现了sticky footer效果。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,365评论 1 88
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,301评论 0 25
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,970评论 0 5
  • Apps这里推荐的 apps 在开发者圈子内普遍评价不错,能便利的处理日常的开发和使用的任务。以下推荐分为四类:开...
    冰J冰阅读 48评论 0 0
  • 疾风日记 Better Diary 简书
    时间之纸窗阅读 99评论 0 0