原文： Quick Tip: The Best Way To Make Sticky Footers

当你在布局网页时，有可能会遇到类似下面的这种情况

导致这一问题的原因是页面内容太少，无法将内容区域撑开，从而在 footer 下面留下一大块空白。

本文将介绍一种现代化的方法，确保 footer 始终处于页面的底部。

解决方法

解决该问题的最好方法是采用 flexbox——CSS3提供的一种先进布局模型，旨在建立具有适应性的布局。如果你对 flexbox 还不怎么熟悉，文章最后有一些扩展阅读链接，可以帮助你了解 flexbox。

我们的演示页面应该具备 Header、主体内容区域和 Footer，下面是该页面的 HTML

<body>

    <header>...</header>

    <section class="content">...</section>

    <footer>...</footer>

</body>

为了启用 flex模式，我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）。同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕。

html{

    height: 100%;

}

body{

    display: flex;

    flex-direction: column;

    height: 100%;

}

现在，我们需要调整各个区域占用的页面空间，我们将通过flex 属性来达到这一目的，该属性实际包含了三个属性，分别是：

  • flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率
  • flex-shrink：如果空间不足，元素的收缩比率
  • flex-basis：元素的伸缩基准值

我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域

header{

   /* 我们希望 header 采用固定的高度，只占用必须的空间 */

   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */

   flex: 0 0 auto;

}

.main-content{

   /* 将 flex-grow 设置为1，该元素会占用所有的可使用空间

      而其他元素该属性值为0，因此不会得到多余的空间*/

   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */

   flex: 1 0 auto;

}

footer{

   /* 和 header 一样，footer 也采用固定高度*/

   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */

   flex: 0 0 auto;

}

最终的效果如下图所示。通过点击中央的粉红按钮改变主体内容，footer 会始终显示在页面的最底部。

结论

如你说见，如果是从零开始构建布局，flexbox 将会是你的得力助手。除了极少数的例外，所有的主流浏览器都支持 flexbox，就 IE 来说，IE9以后的版本都是支持的。

 

一个将 footer 保持在底部的最好方法的更多相关文章

  1. jquery mobile开发中footer一直在底部的设置方法

    现给出html中Body节点中的代码如下: 实现代码:data-position=”fixed” <div data-role="page" id="pageone ...

  2. android 让一个控件按钮居于底部的几种方法

    android 让一个控件按钮居于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_ ...

  3. [转]android 让一个控件按钮居于底部的几种方法

    本文转自:http://www.cnblogs.com/zdz8207/archive/2012/12/13/2816906.html android 让一个控件按钮居于底部的几种方法 1.采用lin ...

  4. 界面为ScrollView时打开界面会自动滚动到底部之解决方法

    开发中遇到了这样的一个问题,界面最外层是ScrollView,然后里面有嵌套了一个ListView还有其他可以获取焦点的View,然后每次打开界面都会自动滚动到最底部,经过一番折腾,发现了一个简单的方 ...

  5. php处理数据库数据，每处理一个数据返回客户端显示当前状态的方法。

    php处理大量数据,每处理一个数据返回客户端显示当前状态的方法. 类似于dedecms生成静态页 想法: 客户端发送请求 服务器端接受请求,开始统计所需处理的数据量 将所需处理数据按一定规则排列,发送 ...

  6. Java判断一个字符是否是数字的几种方法的代码

    在工作期间,将写内容过程经常用到的一些内容段做个记录,下面内容是关于Java判断一个字符是否是数字的几种方法的内容,希望能对码农们有好处. public class Test{ public stat ...

  7. 一个简单的修改 iis默认页面的方法..

    1. IIS 默认打开的是欢迎页面 2. 然后找到了一个比较简单的修改默认界面的方法: 找到这个文件的默认路径 C:\inetpub\wwwroot 然后修改 iisstart.htm 文件 在hea ...

  8. 每天一个JavaScript实例-apply和call的使用方法

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. slice(start, [end]) 选取一个匹配的子集 与原来的slice方法类似

    slice(start, [end]) 概述 选取一个匹配的子集 与原来的slice方法类似 参数 startIntegerV1.1.4 开始选取子集的位置.第一个元素是0.如果是负数,则可以从集合的 ...

随机推荐

  1. Waud.js – 使用HTML5降级处理的Web音频库

    Waud.js 是一个Web音频库,有一个HTML5音频降级处理方案. 它允许您利用Web音频API为你的Web应用程序控制音频功能.在不支持Web音频API的非现代浏览器使用HTML5音频降级方案. ...

  2. [原创]如何利用BI搭建电商数据分析平台

    某电商是某大型服装集团下的重要销售平台.2015 年,该集团品牌价值达数百亿元,产品质量.市场占有率.出口创汇.销售收入连年居全国绒纺行业第一,在中国有终端店3000多家,零售额80 亿.其羊绒制品年 ...

  3. 商业智能BI推动制造业智能化转型

    制造业是我国国民经济的支柱产业,是我国经济增长的主导部门和经济转型的基础,如今我国制造业面临技术工艺不精.缺乏市场意识.商贸流通环节多.物流成本大.仓储效率低下等问题,正处在转型的特殊时期. 内忧: ...

  4. Android中的Libraries以及Order and Export的使用。

    1Add JAR 从Eclipse的现有所有工程中,添加jar包到该工程下 2Add External JARs 从Eclipse外的其他的位置,添加jar包到该工程下 3Add Variable 增 ...

  5. Android设置图片内存溢出（OOM）问题——Android开发进阶之路6

    ImageView设置图片必备常识技术: Android设备会给每个应用分配16M的内存空间,如果你设置的图片的比较大且同一个页面有多个时,经常会报OOM错误导致程序奔溃.所以在这种情况下我们必须要对 ...

  6. 微信小程序热点云笔记demo 开源总结

    因为公司的项目需要,我们自己开发了一个微信小程序的云笔记 开源地址 https://github.com/hotapp888/hotapp-notepad 云笔记功能特点:(1)自动微信登录(2)笔记 ...

  7. 树莓派：raspberry pi 3b - NOOBS

    NOOBS - 多操作系统安装器,可以将不同支持树莓派的流行操作系统安装在一张SD卡中并提供一个启动管理工具,安装的不同操作系统相互独立,互不影响,是一种比较有意思的玩法. 从版本1.3.1开始到1. ...

  8. GitLab CI持续集成配置方案(补)

    上篇文章介绍了GitLab CI的持续集成配置方法,本篇文章将主要介绍NUnit的持续集成和遇到的一些坑 1.NUnit单元测试持续集成 下载NUnit.3.4.1.msi,https://githu ...

  9. Percona TokuDB

    Percona TokuDB Percona TokuDB 1.     TokuDB说明 2.     TokuDB安装 3.     使用TokuDB 3.1 快速插入和富索引 3.2 聚集sec ...

  10. [MySQL性能优化系列]巧用索引

    1. 普通青年的索引使用方式 假设我们有一个用户表 tb_user,内容如下: name age sex jack 22 男 rose 21 女 tom 20 男 ... ... ... 执行SQL语 ...