下面是详解Sticky Footer 绝对底部的两种套路的完整攻略。

一、Sticky Footer的概念

在网页设计中，Sticky Footer指的是网页底部一直贴在视口底部，并且在网页内容过短时也不会出现在视口中的一种解决方案。此外，Sticky Footer还需要保证在网页内容过长时，能够让滚动条正常滚动，即不会被遮挡。

二、套路一：用flex实现

这种套路的主要思路是：

用flex将网页中的容器撑满整个视口；
将网页中的主要内容放在一个flex-grow的容器中，并撑满整个视口；
将网页底部的内容放在一个高度为0的容器中，最后通过margin-top将其推到视口底部。

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer Flex实现</title>
    <style type="text/css">
        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .main {
            flex-grow: 1;
            background-color: #ccc;
        }
        .footer {
            height: 0;
            margin-top: auto;
            background-color: #333;
            color: #fff;
            text-align: center;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 网页中的主要内容 -->
    </div>
    <div class="footer">
        <!-- 网页底部的内容 -->
    </div>
</body>
</html>

该代码中，使用了display: flex来将网页全部撑满整个视口；使用了flex-grow: 1来将主要内容的容器撑满整个视口；使用了margin-top: auto来将尾部内容推到视口底部。

三、套路二：用grid实现

这种套路的主要思路是：

用grid将网页分为两行：第一行放置主要内容，第二行放置网页底部；
将第二行的高度设置为0，并使用 grid-row: 2来定位到视口底部。

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer Grid实现</title>
    <style type="text/css">
        body {
            height: 100%;
            display: grid;
            grid-template-rows: auto 0;
            grid-template-areas:
                "main"
                "footer";
        }
        .main {
            grid-area: main;
            background-color: #ccc;
            height: 100%;
        }
        .footer {
            grid-area: footer;
            background-color: #333;
            color: #fff;
            text-align: center;
            width: 100%;
            height: 0;
            grid-row: 2;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 网页中的主要内容 -->
    </div>
    <div class="footer">
        <!-- 网页底部的内容 -->
    </div>
</body>
</html>

该代码中，使用了display: grid和grid-template-rows将网页分为两行；使用grid-area将主要内容和底部容器定位到相应的位置；使用grid-row: 2将底部容器定位到视口底部。

四、示例说明

下面，我将通过两个示例来说明如何使用以上的两种套路：

示例一

网页中的主要内容包括一个固定高度的头部和一个主体区域，主体区域中的内容比较少，底部需要放置一个版权信息区域，版权信息需要保证在视口底部。

该示例可以使用flex套路来实现。具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer示例一</title>
    <style type="text/css">
        body {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header {
            height: 100px;
            background-color: #ccc;
        }
        .main {
            flex-grow: 1;
            background-color: #ddd;
            display: flex;
            flex-direction: column;
        }
        .footer {
            height: 60px;
            margin-top: auto;
            background-color: #333;
            color: #fff;
            text-align: center;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <!-- 主体内容 -->
    </div>
    <div class="footer">版权信息</div>
</body>
</html>

其中，网页被分为了三个部分：头部、主体和底部。主体部分使用了flex实现。

示例二

网页中的主要内容包括一个固定高度的头部和一个较长的主体区域，主体区域中有一个按钮，当按钮被点击时，会在主体区域中动态添加一些内容。底部需要放置一个版权信息区域，版权信息需要保证在视口底部。

该示例可以使用grid套路来实现。具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer示例二</title>
    <style type="text/css">
        body {
            height: 100%;
            display: grid;
            grid-template-rows: 100px auto 0;
            grid-template-areas:
                "header"
                "main"
                "footer";
        }
        .header {
            grid-area: header;
            background-color: #ccc;
        }
        .main {
            grid-area: main;
            background-color: #ddd;
            position: relative;
        }
        .button {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 10px;
            background-color: #333;
            color: #fff;
            cursor: pointer;
            z-index: 2;
        }
        .content {
            position: relative;
            z-index: 1;
        }
        .footer {
            grid-area: footer;
            background-color: #333;
            color: #fff;
            text-align: center;
            width: 100%;
            height: 0;
            grid-row: 3;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <div class="button">添加内容</div>
        <div class="content">
            <!-- 主体内容 -->
        </div>
    </div>
    <div class="footer">版权信息</div>
    <script>
        //按钮点击事件，添加内容
        document.querySelector('.button').addEventListener('click', function() {
            let content = document.createElement('div');
            content.innerHTML = '这是新添加的内容';
            document.querySelector('.content').appendChild(content);
        });
    </script>
</body>
</html>

其中，网页被分为了三个部分：头部、主体和底部。主体部分使用了grid实现，并且在其中动态添加了新的内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解Sticky Footer 绝对底部的两种套路 - Python技术站