原文： 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. 浅谈Angular的 $q, defer, promise

    浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00  博客园-原创精华区 原文  http://www.cnblogs.com/big-snow/ ...

  2. iOS NSNotificationCenter详解

    通知中心的特点: 1:同步执行 2: 一对多发送消息 3: 降低程序耦合度 通知中心是单例,目的就是从任意一个发送消息到任意一个接收者,是同步执行的. 那么什么是同步呢? 用网上经典的说法,就是我叫朋 ...

  3. 怎么修改与设置.java文件属性？

    1.首先  打开  >>  Myeclipse或Eclipse.(我用的是Myeclipse) 2.打开  >>  Window  >>  Preferences  ...

  4. Webform（六）——登录状态保持（Cookies内置对象）

    用户用浏览器访问一个网站,由于采用的http的特性,Web服务器并不能知道是哪一个用户正在访问,但一些网站,希望能够知道访问者的一些信息,例如是不是第一次访问,访问者上次访问时是否有未做完的工作,这次 ...

  5. JS原型链

    JS作为发展了多年了对象语言,支持继承,和完全面向对象语言不同的是,JS依赖原型链来实现对象的继承. 首先JS的对象分两大类,函数对象和普通对象,每个对象均内置__proto__属性,在不人为赋值__ ...

  6. Python学习笔记3-字符串

    格式化字符串/复合字段名 >>> import humansize >>> si_suffixes = humansize.SUFFIXES[1000] >& ...

  7. SQLServer中Partition By 函数的使用

    今天群里看到一个问题,在这里概述下:查询出不同分类下的最新记录.一看这不是很简单的么,要分类那就用Group By;要最新记录就用Order By呗.然后在自己的表中试着做出来: 首先呢我把表中的数据 ...

  8. Servlet过滤器

    Servlet过滤器 [TOC] 1.过滤器的基本概念 1.1.基本概念 过滤器(Filter)属于tomcat服务器中的Servlet功能.在普通的javaweb服务中,jsp中的请求要被Servl ...

  9. Linux文件管理

    虚拟文件系统(VFS)概述: VFS位于文件系统.和访问文件的系统调用(API)之间,为系统调用访问文件系统提供统一的抽象接口. 不同文件系统连接成一个单一树形结构,分别挂载(自己挂载需要用mount ...

  10. Appium+python的一个简单完整的用例

    最近一直在忙,终于有时间来整理一下,传一个简单的用例,运行之后可以看到用例的报告,希望对大家有帮助. HTMLTestRunner这个包网上有很多,大家可以自己下载. 1 import unittes ...