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

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>

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>

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>

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>

【CSS】Sticky Footer 布局的更多相关文章

  1. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

  2. css sticky footer 布局

    方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...

  3. css sticky footer布局

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...

  4. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  5. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  6. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  7. 前端经典布局：Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  8. CSS Sticky Footer: 完美的CSS绝对底部

    CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...

  9. sticky footer布局，定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. 游戏AI

    玩游戏太累了,我或许可以写一个机器人帮我玩游戏发QQ发空间啥的

  2. nil/Nil/NULL/NSNull

    nil/Nil/NULL/NSNull的区别 一个简单的小例子: NSObject *obj = nil; NSLog(@"%@",obj); =>null NSObject ...

  3. dva中roadhog版本升级后带来的问题及解决方法

    从同事手中接手项目之后.npm install 然后npm start的时候.开始报上图的错误.解决方法一(比较 愚蠢)当时找到的解决方法都没有用.然后只能按照报错的路径,从同事那边复制了node_m ...

  4. Linux在VirtualBox的网络设置

    一.Linux系统版本:Centos7.4. 二.访问外网:在设置-网络-网卡1处选择 “网络地址置换(NAT)”即可.默认情况下,自动获取IP(DHCP),但要在配置中把开机启动选上. 文件位置: ...

  5. [java,2017-06-12] myEclipse双击无法打开文件

    点击 Window---->Preferences---> General---> Editors ---> File Associations 选择Associated ed ...

  6. ubuntu python的升级与回滚

    转自:https://www.cnblogs.com/wmr95/p/7637077.html 正常情况下,你安装好ubuntu16.04版本之后,系统会自带 python2.7版本,如果需要下载新版 ...

  7. pyqt5 -—-布局管理

    绝对布局 例如: 我们使用move()方法定位了每一个元素,使用x.y坐标.x.y坐标的原点是程序的左上角. lbl1 = QLabel('Zetcode', self) lbl1.move(15, ...

  8. openssl升级

    红帽6.2升级openssl方法 yum安装nginx时,发现openssl依赖包错误,提示openssl要求版本为1.0.1 ,但当前版本为1.0.0.通过网上介绍的办法,将openssl源码重新编 ...

  9. zabbix通过agent添加监控项的步骤

    1.确定要监控的对象的指标 2.在agent端上,把如何具体获取指标写成shell脚本,并放在一个和其它agent端统一的位置上 3.在agent端上,自定义监控项key值,配置zabbix_agen ...

  10. python运行时参数m的作用

    不加m时,当前目录是py文件的所在目录 加m时,当前目录就是当前目录