什么是 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. WebApp的自动测试工具： Jenkins

    一.下载并安装(msi)https://jenkins.io/download/thank-you-downloading-windows-installer-stable/ 在安装过程这, 需要从p ...

  2. sql语句case when 以及left()

    select count(CASE jyje WHEN '1300' THEN '2' ELSE '1' END) as count  from tpent_orders where cplx = 6 ...

  3. tomcat启动问题 严重: End event threw exception

    错误信息: 严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebX ...

  4. C#通过COM组件调用IDL的pro程序

    如果在“COM_IDL_connectLib.COM_IDL_connect oComIDL = new COM_IDL_connectLib.COM_IDL_connect();”步骤提示“...8 ...

  5. [C++]数组指针，数组引用，函数指针

    数组指针是指一个指向数组的指针,例如有一个数组指针p指向一个数组a[],则 *p是取到这个数组,也就是说 *p=a,因此 **p =a[0], 它的定义为: ]; ]=&a; (*c)表示它是 ...

  6. POIUtils 读取 poi

    依赖: <!-- ############ poi ############## --> <dependency> <groupId>org.apache.poi& ...

  7. JAVA SpringBoot2 关于 JSON 数据处理，基于 ObjectMapper

    1,当今的互联网开发行业,JSON 这种数据格式越来越成为网络开发的主流,尤其是前后端分离之后,几乎百分百的数据交互方式都是采用 JSON 2,由于 SpringMVC 框架的封装性,我们日常开发中只 ...

  8. POC iis短文件名

    __author__ = '*'# -*- coding:utf-8 -*- from lib.httpparse import httpparse def verify(protocol,ip,po ...

  9. @PostConstruct注解小结

    1.在具体Bean的实例化过程中,@PostConstruct注解的方法,会在构造方法之后,init方法之前进行调用2.在项目中@PostConstruct主要应用场景是在初始化Servlet时加载一 ...

  10. python中TCP协议中的粘包问题

    TCP协议中的粘包问题 1.粘包现象 基于TCP实现一个简易远程cmd功能 #服务端 import socket import subprocess sever = socket.socket() s ...