一、什么是sticky footer

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

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

先看效果

下面是代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=" utf-8">
  5.     <title>margin，padding实现sticky footer</title>
  6.     <style>
  7.         html, body, p {
  8.             padding: 0;
  9.             margin: 0;
  10.             height: 100%;
  11.         }
  12.  
  13.         body {
  14.             min-height: 100%;
  15.         }
  16.  
  17.         #wrapper {
  18.             min-height: 100%;
  19.             background: yellow;
  20.         }
  21.  
  22.         #content {
  23.             padding-bottom: 50px;
  24.             vertical-align: center;
  25.  
  26.         }
  27.         #text-content{
  28.             height: 500px;
  29.         }
  30.         #footer {
  31.             margin-top: -50px;
  32.             height: 50px;
  33.             background: wheat;
  34.         }
  35.     </style>
  36.  
  37. </head>
  38. <body>
  39. <div id="wrapper">
  40.     <div id="content">
  41.         <div id="text-content">填充内容11111111111111</div>
  42.     </div>
  43. </div>
  44. <div id="footer">底部内容</div>
  45. </body>
  46. </html>

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

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

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

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

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

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

三、第三种方式，使用flex

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=" utf-8">
  5.     <title>flex Sticky footer</title>
  6.     <style>
  7.         html, body {
  8.             height: 100%;
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.  
  13.         body {
  14.             min-height: 100%;
  15.             display: flex;
  16.             flex-direction: column;
  17.         }
  18.  
  19.         #header {
  20.             line-height: 50px;
  21.             background: wheat;
  22.         }
  23.  
  24.         #content {
  25.             flex: 1;
  26.             background: yellow;
  27.         }
  28.  
  29.         #text-content {
  30.             height: 600px;
  31.         }
  32.  
  33.         #footer {
  34.             line-height: 50px;
  35.             background: wheat;
  36.         }
  37.     </style>
  38.  
  39. </head>
  40. <body>
  41. <div id="header">顶部</div>
  42. <div id="content">
  43.     <div id="text-content">aasdasd</div>
  44.  
  45. </div>
  46. <div id="footer">底部</div>
  47. </body>
  48. </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. 支付宝开源非侵入式 Android 自动化测试工具 Soloπ

    Soloπ(SoloPi)是支付宝开源的一个无线化.非侵入式的Android自动化测试工具,公测版拥有录制回放.性能测试.一机多控三项主要功能,能为测试开发人员节省宝贵时间. 本文是SoloPi团队关 ...

  2. 关于mysql的范式——反范式的思路

    数据库的设计,是有模式的,就是在实际生产的项目中,按照怎样怎样步骤的去做.减少冗余呀,一对多呀等等. 那么回归到一个问题:数据库究竟是为了添加,还是为了查询?这个问题有些轴,以 增删改查四律而言,都是 ...

  3. thinkphp5.1+ 使用 Redis 缓存

    修改 config/cache.php 将其配置成多个缓存类型,示例 <?php // +---------------------------------------------------- ...

  4. Java 后台设置session成功，获取为空

    cookie secure当服务器使用https时,容易出现漏洞SSL cookie without secure flag set,敏感cookie这时就需要打开cookie secure,服务器端 ...

  5. 使用spring boot创建fat jar APP

    文章目录 介绍 build和run fat jar和 fat war 更多配置 介绍 在很久很很久以前,我们部署web程序的方式是怎么样的呢?配置好服务器,将自己写的应用程序打包成war包,扔进服务器 ...

  6. Docker安装Alibaba Nacos教程（单机）

    SpringCloudAlibaba实战教程系列 阿里巴巴Nacos官方文档 docker:官网 docker:镜像官网:镜像官网可以所有应用,选择安装环境:会给出安装命令,例如:docker pul ...

  7. 标准库hashlib模块

    hashlib模块用于加密相关的操作,3.x里代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512, MD5 算法(都是基于hash的算法, ...

  8. bootstrap-分页-默认分页

    说明 默认分页 示例 <!DOCTYPE html> <html lang="zh-CN">    <head>      <meta c ...

  9. WCF客户端和服务的实现

    WCF客户端和服务 ?服务器端: – 定义和实现服务契约 – 为服务类型构建ServiceHost实例,暴露endpoints – 打开通讯通道 ?客户端: – 需要服务契约的一个副本和关于endpo ...

  10. CentOS启用iptables防火墙

    centos 7默认的防火墙使用firewall,系统服务管理方式也变更了,可以通过systemctl命令控制. 可以参考这个链接 但是习惯用iptables,可以按下面的操作改下 1.关闭firew ...