【CSS】Sticky Footer 布局

程序员文章站 2023-11-30 10:36:52

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

上一篇： ThinkPHP设置禁止百度等搜索引擎转码(简单实用)

下一篇：在Windows7中的DPI与主题的问题

【CSS】Sticky Footer 布局

10分钟理解CSS3 FlexBox弹性布局

10分钟理解CSS3 Grid布局

css3实现元素环绕中心点布局的方法示例

CSS3 Flex 弹性布局实例代码详解

css怎么用，divcss布局经典实例

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

【CSS】Sticky Footer 布局

css3 column实现卡片瀑布流布局的示例代码

巧用CSS3的calc()宽度计算做响应模式布局的方法

css3 media 响应式布局的简单实例