原文： 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. 菜鸟快飞之JavaScript对象、原型、继承（二）

    上一节写了创建对象的三种方法,而其中通过函数创建对象的方式又有三种模式,分别是工厂模式.构造函数模式.原型模式.而这三种模式最常用的则是原型模式.还是上栗子: 工厂模式: function Fun1( ...

  2. DS 工作室

    如果你想租用我,QQ:26959368 价格可以详细谈哦, 1. 企业信息化过程中问题的免费咨询: 2. Office 365.Sharepoint Online .Azure 云的咨询服务. 3. ...

  3. Linux用户态和内核态

    究竟什么是用户态,什么是内核态,这两个基本概念以前一直理解得不是很清楚,根本原因个人觉得是在于因为大部分时候我们在写程序时关注的重点和着眼的角度放在了实现的功能和代码的逻辑性上,先看一个例子: 1)例 ...

  4. EA方法论

    1 EA的定义 Enterprise Architecture,企业架构,简称EA.根据开放群组的业务领导层IT架构指引:“有效的企业架构(Enterprise Architecture,EA)对企业 ...

  5. Event Handler

    在Event Handler中,有一种特殊的Event Handler,称之为Synchronizer或者Denormalizer,其作用就是为了同步“Query Database”.Query Da ...

  6. 关于sql中in 和 exists 的效率问题，in真的效率低吗

    原文: http://www.cnblogs.com/AdamLee/p/5054674.html 在网上看到很多关于sql中使用in效率低的问题,于是自己做了测试来验证是否是众人说的那样. 群众: ...

  7. Linux基础练习题

    1.列出当前系统上所有已经登录的用户名,注意:同一个用户登录多次,则只显示一次即可. [root@bj-1-160-enzhi ~]# who|cut -d ' ' -f 1|uniq -c 2 ro ...

  8. problems during rovio build

    1. rovio的readme中使用的是catkin build, ROS tutorial中用的是catkin_make. 关于build与make的区别: build重新编译所有文件:make默认 ...

  9. .net core ClaimsPrincipal Class

    hClaimsPrincipal Class ttps://msdn.microsoft.com/en-us/library/system.identitymodel.services.claimsp ...

  10. 基于pcDuino-V2的无线视频智能小车

    这段时间抽空做了个智能视频小车.包含了pid电机控制.socket网络编程.多线程编程.epoll机制.gtk图形界面编程. 这是界面: 小车的底层是用的stm32f405系列的单片机+电机驱动做的一 ...