【CSS】Sticky Footer 布局

2018-12-09 11:18:44来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

什么是 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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Bootstrap -- 网格系统、排版样式类、 &lt;blockquote&gt;、 &lt

下一篇:深入解析Vue.js中v-bind v-model的使用和区别