使用Flexbox实现Sticky footer

2023年11月1日 137次阅读 来源: 打铁大师

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞