CSS实现Sticky Footer的示例代码

当网页内容不足以占满整个页面时，如果页面的底部有一行始终停留在页面的底部，这种效果称为"Sticky Footer"（粘性页脚）。

以下是实现Sticky Footer的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Sticky Footer Example</title>
    <style type="text/css">
        * { margin: 0; }
        html, body { height: 100%; }
        .container {
            min-height: 100%;
            margin-bottom: -50px;
        }
        .footer { 
            height: 50px; 
            background-color: #333; 
            color: #fff;
            text-align: center;
        }
        .footer, .container:after {
            content: "";
            display: block;
        }
        .container:after {
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>Your website content goes here.</p>
    </div>
    <div class="footer">
        <p>Your sticky footer content goes here.</p>
    </div>
</body>
</html>

以上代码中实现Sticky Footer的关键点如下所述：

1.使用min-height属性使包含内容的容器（.container）至少和视口一样高。

2.margin-bottom属性值要和footer高度相同，这个负边距作用是将容器向上移动，从而使用这个高度生成的空间。

3.使用伪元素::after创建与footer相同高度的虚拟元素，使其距离内容的div上边缘留出空间。这样，当内容的div增加其起始高度时，虚拟元素也一起增加其高度。

4.为footer设置样式，以确保它始终位于容器底部。

另外，注意到上述示例中的html、body元素最小高度都被设定为100%，这是为了确保页面内容足够满屏，否则会影响Sticky Footer效果。

示例1：

下面是实现带有多个内容区（.content）的Sticky Footer的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Sticky Footer Example</title>
    <style type="text/css">
        * { margin: 0; }
        html, body { height: 100%; }
        .container {
            min-height: 100%;
            margin-bottom: -50px;
        }
        .content {
            margin-bottom: 50px;
        }
        .footer { 
            height: 50px; 
            background-color: #333; 
            color: #fff;
            text-align: center;
        }
        .footer, .container:after {
            content: "";
            display: block;
        }
        .container:after {
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <p>Your website content goes here.</p>
        </div>
        <div class="content">
            <p>Your website content goes here.</p>
        </div>
        <div class="content">
            <p>Your website content goes here.</p>
        </div>
    </div>
    <div class="footer">
        <p>Your sticky footer content goes here.</p>
    </div>
</body>
</html>

示例2：

下面是实现Sticky Footer时呈现始终完整的背景图像的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Sticky Footer Example</title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-image: url(background.jpg);
            background-size: cover;
            background-attachment: fixed;
        }
        .container {
            min-height: calc(100% - 50px);
            margin-bottom: -50px;
            padding: 20px;
            color: #fff;
            text-shadow: 1px 1px #333;
        }
        .footer {
            height: 50px;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            text-align: center;
        }
        .footer, .container:after {
            content: "";
            display: block;
        }
        .container:after {
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>Your website content goes here.</p>
    </div>
    <div class="footer">
        <p>Your sticky footer content goes here.</p>
    </div>
</body>
</html>

此示例中，网页背景图像会营造一个完整而高端的感觉，而Sticky Footer与内容的div永远都是全幅屏幕的。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS实现Sticky Footer的示例代码 - Python技术站

CSS实现Sticky Footer的示例代码

相关文章