粘性页脚 Sticky Footer 最佳方式

最新推荐文章于 2023-03-03 09:51:47 发布

weixin_30535167

最新推荐文章于 2023-03-03 09:51:47 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/fyqx/p/8974910.html

版权

　　前段时间工作中遇到粘性页脚的需求,以前用过JS控制过,最后发现flex布局是解决这类问题的好帮手.

粘性页脚:即使没有足够的内容填充页面，也要将页脚固定到窗口的底部.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .box {
          display: flex;
          min-height: 100vh;
          flex-direction: column;
        }

        .main {
          flex: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <header>header</header>
          <div class="main">main</div>
          <footer>footer</footer>
    </div>
</body>
</html>