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

    while true; do select input in cpu_load disk_load disk_use disk_inode mem_use tcp_status cpu_top10 m ...

  2. Verilog语言

    for循环应用 1.复位寄存器组 例如有32个寄存器,需要异步复位 always@(posedge clk or negedge rst_n) begin if (rst_n == 1'b0) beg ...

  3. vue登录注册及token验证

    // router.jsimport Vue from 'vue'import VueRouter from 'vue-router' Vue.use(VueRouter) const routes ...

  4. 用 Python 获取 B 站播放历史记录

    用 Python 获取 B 站播放历史记录 最近 B 站出了一个年度报告,统计用户一年当中在 B 站上观看视频的总时长和总个数.过去一年我居然在 B 站上看了2600+个视频,总计251个小时,居然花 ...

  5. Android 开发 使用javax.mail发送邮件。

    简介 sun公司开源的邮件发送工具. 依赖 implementation 'com.sun.mail:android-mail:1.6.0' implementation 'com.sun.mail: ...

  6. Eclipse导入文件识别不了jsp怎么办

    1.在出现错误代码页开始处加上<%@ page import="java.util.*"%>,把包引进来2.然后右击项目,依次选择Properties->Java ...

  7. supergridcontrol记录，分页

    sqlserver分页记录 select top 50 DengJiBH,sSuoYouQuanShenQingRen,sZuoLuo,sQiuHao,sQuanHao,ChaXun_BianHao, ...

  8. zabbix3.0.4 探索主机Discovery自动发现agent主机和zabbix-agent自动注册详细图文教程

    Zabbix 自动发现(Discovery)功能使用 随着监控主机不断增多,有的时候需要添加一批机器,特别是刚用zabbix的运维人员需要将公司的所有服务器添加到zabbix,如果使用传统办法去单个添 ...

  9. Gradle 打多渠道包

    使用gradle 打多渠道包记录经验如下图可见,每个渠道是包含debug 和realse版本的.通过打印BASE_URL 发现在渠道和版本中都可以修改BuildConfig的常量,这样一次可以打出多个 ...

  10. MyEclipse和eclipse生成变量快捷键

    MyEclipse和eclipse生成变量快捷键MyEclipse和eclipse生成变量快捷键 一.MyEclipse快捷生成变量(两种):第一种: 光标放在该行的任意位置,按 Ctrl+2,会弹出 ...