美文网首页
footer显示在网页最下方可滚动

footer显示在网页最下方可滚动

作者: 简小咖 | 来源:发表于2018-05-25 15:26 被阅读0次

相关样式

 <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }
        html,
        body {
            height: 100%;
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .header {
            flex: 0 0 auto;
        }
        .main-bg {
            flex: 1 0 auto;
        }
        .footer {
            flex: 0 0 auto;
        }
    </style>

页面

<body>
    <div class="container">
        <div class="header">
           header
        </div>
        <div class="main-bg">
        main
        </div>
        <div class="footer">footer</div>
    </div>
</body>

相关文章

网友评论

      本文标题:footer显示在网页最下方可滚动

      本文链接:https://www.haomeiwen.com/subject/ynqujftx.html