【CSS】Sticky Footer 布局

程序员文章站 2023-10-19 16:50:17

什么是 Sticky Footer 布局？ Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局。 footer 可以是任意的元素，该布局会形成一种当内容不足，footer 会定位在视口的最低部，当内容充足，footer 会紧跟在内容后面的效果。 position实现效果 ......

什么是 sticky footer 布局？

sticky footer 布局是一种将 footer 吸附在底部的css布局。

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

【CSS】Sticky 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 布局

css3的@media属性实现页面响应式布局示例代码

CSS3的Flexbox布局的简明入门指南

使用CSS3实现多列布局与多背景的技巧

Bootstrap CSS布局之图像

详解HTML5将footer置于页面最底部的方法(CSS+JS)

CSS-Flex布局

CSS3实现瀑布流布局与无限加载图片相册的实例代码

【CSS】Sticky Footer 布局

CSS Grid 布局完全指南(图解 Grid 详细教程)

css设计并排布局