一、什么是sticky footer

如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，我们看到的效果就如下面两张图这样。这种效果基本是无处不在的，很受欢迎。

二、第一种方式，利用margin和padding实现

先看效果

下面是代码

<!DOCTYPE html>

<html>

<head>

    <meta charset=" utf-8">

    <title>margin，padding实现sticky footer</title>

    <style>

        html, body, p {

            padding: 0;

            margin: 0;

            height: 100%;

        }

        body {

            min-height: 100%;

        }

        #wrapper {

            min-height: 100%;

            background: yellow;

        }

        #content {

            padding-bottom: 50px;

            vertical-align: center;

        }

        #text-content{

            height: 500px;

        }

        #footer {

            margin-top: -50px;

            height: 50px;

            background: wheat;

        }

    </style>

</head>

<body>

<div id="wrapper">

    <div id="content">

        <div id="text-content">填充内容11111111111111</div>

    </div>

</div>

<div id="footer">底部内容</div>

</body>

</html>

可以尝试下在text-content中添加内容，可以发现，底部footer是不会受到影响的，坚挺的固定在底部。

这种套路的思路是，给内容区域设置 min-height: 100%，将 footer 推到屏幕下方

然后给 footer 添加 margin-top，其值为 footer 高度的负值，就能让 footer 回到屏幕底部

需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin， 必须保持一致

这种写法的兼容性非常好，实测 IE7 也能正常展示

但是如果页面的主体布局有其他兼容性问题，Sticky Footer 就需要做一些相应的修改

三、第三种方式，使用flex

代码如下，没有添加兼容性前缀

<!DOCTYPE html>

<html>

<head>

    <meta charset=" utf-8">

    <title>flex Sticky footer</title>

    <style>

        html, body {

            height: 100%;

            padding: 0;

            margin: 0;

        }

        body {

            min-height: 100%;

            display: flex;

            flex-direction: column;

        }

        #header {

            line-height: 50px;

            background: wheat;

        }

        #content {

            flex: 1;

            background: yellow;

        }

        #text-content {

            height: 600px;

        }

        #footer {

            line-height: 50px;

            background: wheat;

        }

    </style>

</head>

<body>

<div id="header">顶部</div>

<div id="content">

    <div id="text-content">aasdasd</div>

</div>

<div id="footer">底部</div>

</body>

</html>

这种方法就是利用flex布局对视窗高度进行分割。

footer的flex设为0，这样footer获得其固有的高度;

content的flex设为1，这样它会充满除去footer的其他部分。

两种方式实现sticky footer绝对底部的更多相关文章

  1. Android ScrollView监听滑动到顶部和底部的两种方式（你可能不知道的细节）

    Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...

  2. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  3. Log4Net日志记录两种方式

     简介 log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具.     log4net是Ap ...

  4. React组件导入的两种方式(动态导入组件的实现)

    一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...

  5. Struts2实现ajax的两种方式

    基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...

  6. CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking)

    CSharpGL(18)分别处理glDrawArrays()和glDrawElements()两种方式下的拾取(ColorCodedPicking) 我在(Modern OpenGL用Shader拾取 ...

  7. 两种方式实现java生成Excel

    Web应用中难免会遇到需要将数据导出并生成excel文件的需求.同样,对于本博客中的总结,也是建立在为了完成这样的一个需求,才开始去了解其实现形式,并且顺利完成需求的开发,先将实现过程总结于此.本博文 ...

  8. 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

    在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...

  9. （转）SqlServer 数据库同步的两种方式 (发布、订阅)，主从数据库之间的同步

    最近在琢磨主从数据库之间的同步,公司正好也需要,在园子里找了一下,看到这篇博文比较详细,比较简单,本人亲自按步骤来过,现在分享给大家. 在这里要提醒大家的是(为了更好的理解,以下是本人自己理解,如有错 ...

随机推荐

  1. linq详细案例

    LINQ to SQL语句(1)之Where 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的子句.Where操 ...

  2. Java 排序算法-冒泡排序及其优化

    Java 排序算法-冒泡排序及其优化 什么是冒泡排序 基本写法 优化后写法 终极版本 源码及测试 什么是冒泡排序 这里引用一下百度百科上的定义: 冒泡排序(Bubble Sort),是一种计算机科学领 ...

  3. python爬虫(1)requests库

    在pycharm中安装requests库的一种方法 首先找到设置 搜索然后安装,蓝色代表已经安装 requests库中的get请求 与HTTP协议相对应,requests库也有七种请求方式. 获取ur ...

  4. HTML H5响应式，表格，表单等

    HTML杂项 响应式图片 <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800 ...

  5. 全国315个城市，用python爬取肯德基老爷爷的店面信息

    我觉得我生活在这世上二十多年里,去过最多的餐厅就是肯德基小时候逢生日必去,现在长大了,肯德基成了我的日常零食下班后从门前路过饿了便会进去点分黄金鸡块或者小吃拼盘早上路过,会买杯咖啡.主要快捷美味且饱腹 ...

  6. Libra教程之:Libra testnet使用指南

    文章目录 Libra testnet网络 下载和安装Libra 编译Libra client并连接到Testnet网络 创建两个A和B的两个账号 检查libra cli Client是否运行 创建A的 ...

  7. 7.JUC线程高级-生产消费问题&虚假唤醒

    描述 生产消费问题在java多线程的学习中是经常遇到的问题 ,多个线程共享通一个资源的时候会出现各种多线程中经常出现的各种问题. 实例说明 三个类:售货员Clerk,工厂Factory,消费者Cons ...

  8. 强行重装IE6

    一句指令解决了郁闷一天的问题: 今天碰到问题如下: 在不知是不是人品问题的情况下(其实基本是优化大师嫌疑最大)发现在第三方引用的软件中不能打开IE了: 具体症状: 在QQ中点击别人的链接,没反应: 在 ...

  9. Eclipse 全部快捷一览表（具TM全）

    1. 编辑快捷键 编辑快捷键 介绍 psvm + Tab 生成main方法 sout + tab 生成输出语句 Ctrl+X / Ctrl + Y 删除一行 Ctrl+D 复制一行 Ctrl+/ 或 ...

  10. SVN 部署（基于 Linux）

    1.通过 yum 命令安装 svnserve,命令如下: # 此命令会全自动安装svn服务器相关服务和依赖,安装完成会自动停止命令运行 yum -y install subversion # 若需查看 ...