CSS 中经典的stick footer布局

越陌度阡

发布于 2020-11-26 11:35:52

6510

发布于 2020-11-26 11:35:52

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

前端开发中，会有这样一种布局，当页面内容不足一屏时，页脚在屏幕底部，当内容超过一屏时，页脚随着内容的增加而向下移动，即人们常说的的stick footer布局，如下图所示。

实现这个布局的方案有多种，下面给大家介绍一种比较经典的实现方案。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 中经典的 stick footer 布局</title>
        <style>
            * {
                margin: 0;
            }

            #document {
                height: 100vh;
                display: flex;
                flex-direction: column;
                background: #202020;
                font-family: microsoft yahei, wenquanyi micro hei, sans-serif !important;
            }

            /* 以下是重要代码 */
            nav,
            footer {
                background: #494949;
                display: flex;
                justify-content: center;
            }

            main {
                color: #bdbdbd;
                flex: auto;
            }

            footer {
                flex-shrink: 0;
            }
            /* 以上是重要代码 */

            h1,
            p {
                text-align: center;
                padding: 15px;
            }

            nav>h1 {
                color: #82FCFD;
                text-shadow: 1px 1px 4px #00000080;
            }

            footer>h1 {
                color: #82FCFD;
                text-shadow: 1px 1px 4px #00000080;
            }
        </style>
    </head>

    <body>
        <div id="document">
            <nav>
                <h1>头部内容</h1>
            </nav>
            <main>
                <p>可以添加更多内容看看底部的变化</p>
            </main>
            <footer>
                <h1>底部内容</h1>
            </footer>
        </div>
    </body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/04/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

footer