使用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效果。

    原文作者:打铁大师
    原文地址: https://www.jianshu.com/p/08496dbc6cf4
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞