【CSS】Sticky Footer 布局

什么是 Sticky Footer 布局？

Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局。

footer 可以是任意的元素，该布局会形成一种当内容不足，footer 会定位在视口的最低部，当内容充足，footer 会紧跟在内容后面的效果。

position实现效果1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer 布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        .wrapper {
            position: relative;

            /*border-box: 为元素指定的任何 padding 和 border 都将在已设定的宽度和高度内进行绘制
            这里的作用是浏览器视口被当成了 border ,如果不设置该属性则无法将 footer 置于浏览器视口的底部*/
            box-sizing: border-box;

            /*这里的作用是将 .wrapper 的高度撑满整个浏览器的视口，当内容不足的时候，也能保证 .wrapper 的高度是浏览器视口的高度*/
            min-height: 100%;
            
            /*这里的作用是为 .footer 预留空间，防止 .wrapper 的内容被 .footer 遮盖到，值是 .footer 的高度*/
            padding-bottom: 100px;
        }
        .content ul {
            list-style: none;
        }
        .content ul li {
            height: 100px;
            background-color: #ccc;
            border-bottom: 1px solid #f6f6f6;
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <ul>
                <li></li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

position实现效果2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer 布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        .wrapper {
            /*border-box: 为元素指定的任何 padding 和 border 都将在已设定的宽度和高度内进行绘制
            这里的作用是浏览器视口被当成了 border ,如果不设置该属性则无法将 footer 置于浏览器视口的底部*/
            box-sizing: border-box;

            /*这里的作用是将 .wrapper 的高度撑满整个浏览器的视口，当内容不足的时候，也能保证 .wrapper 的高度是浏览器视口的高度*/
            min-height: 100%;
            
            /*这里的作用是为 .footer 预留空间，防止 .wrapper 的内容被 .footer 遮盖到，值是 .footer 的高度*/
            padding-bottom: 100px;
        }
        .content ul {
            list-style: none;
        }
        .content ul li {
            height: 100px;
            background-color: #ccc;
            border-bottom: 1px solid #f6f6f6;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <ul>
                <li></li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

View Code

flex实现效果1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer 布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        .wrapper {
            /*使用 flex 布局 子元素列排布*/
            display: flex;
            flex-direction: column;

            /*这里的作用是将 .wrapper 的高度撑满整个浏览器的视口，当内容不足的时候，也能保证 .wrapper 的高度是浏览器视口的高度*/
            min-height: 100%;
        }
        .content {
            /*因为父元素使用了 flex 布局，这里设置使 .content 的高度是 .wrapper 的高度减去 .footer 的高度*/
            flex: 1;
        }
        .content ul {
            list-style: none;
        }
        .content ul li {
            height: 100px;
            background-color: #ccc;
            border-bottom: 1px solid #f6f6f6;
        }
        .footer {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <ul>
                <li></li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

View Code

flex实现效果2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer 布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        .wrapper {
            /*使用 flex 布局 子元素列排布*/
            display: flex;
            flex-direction: column;
            
            /*这里的作用是将 .wrapper 的高度撑满整个浏览器的视口，当内容不足的时候，也能保证 .wrapper 的高度是浏览器视口的高度*/
            min-height: 100%;
        }
        .content {
            /*因为父元素使用了 flex 布局，这里设置使 .content 的高度是 .wrapper 的高度减去 .footer 的高度*/
            flex: 1;
        }
        .content ul {
            list-style: none;
        }
        .content ul li {
            height: 100px;
            background-color: #ccc;
            border-bottom: 1px solid #f6f6f6;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <ul>
                <li></li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

View Code

calc实现效果1

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer 布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        .wrapper {
            /*使用 calc 需要显示的设置 height ，如果使用 min-height 则会是跟随的效果*/
            min-height: 100%;
        }
        .content {
            /*min-height 是CSS的计算函数*/
            min-height: calc(100% - 100px);
        }
        .content ul {
            list-style: none;
        }
        .content ul li {
            height: 100px;
            background-color: #ccc;
            border-bottom: 1px solid #f6f6f6;
        }
        .footer {
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <ul>
                <li></li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

View Code

calc实现效果2

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer 布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            height: 100%;
        }
        .wrapper {    
            height: 100%;
        }
        .content {
            /*min-height 是CSS的计算函数*/
            min-height: calc(100% - 100px);
        }
        .content ul {
            list-style: none;
        }
        .content ul li {
            height: 100px;
            background-color: #ccc;
            border-bottom: 1px solid #f6f6f6;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 100px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <ul>
                <li></li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

View Code

【CSS】Sticky Footer 布局

猜你喜欢