原文： 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. 如何在web中实现类似excel的表格控件

    Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数 ...

  2. jquery 点击查看更多箭头变化，文字变化,超出带滚动条。

    从网上好了好久,没找到自己要的,自己写了一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  3. iOS开发-- 通过runtime kvc 移除导航栏下方的阴影效果线条

    网上查了很多, 都是重新绘制, 感觉有点蠢, 恰巧工作有会闲, 就简单的通过runtime遍历了下属性找寻了下私有类和方法, 这里直接贴方法, 找寻过程也发出来, 能看懂的直接就能看懂, 看不太明白的 ...

  4. Linq表达式和Lambda表达式用法对比

    什么是Linq表达式?什么是Lambda表达式?前一段时间用到这个只是,在网上也没找到比较简单明了的方法,今天就整理了一下相关知识,有空了再仔细研究研究 public Program() { List ...

  5. although 和 although 的区别

    作为连词的时候,although 和 though 是可以互换的.Although 一般被认为更加正式一些.比如,以下的这些句子: Growth in Europe is maintaining mo ...

  6. redis-cli中那些或许我们还不知道的一些实用小功能

    玩过redis的朋友都知道,redis中有一个叫做redis-cli的小工具,我们可以利用它在test和develop环境下进行高效的模拟测试,然而在现实环境中, 我们只知道直接键入redis-cli ...

  7. 解决Native atomics support not found问题

    今天用arm-none-linux-gnueabi交叉编译libmysqclient.so,出现Native atomics support not found问题 进入mysql-connector ...

  8. [译]Thinking in React

    编者按 使用React的思想来构建应用对我在实际项目中以及帮助他人解决实际问题时起到了很大作用,所以我翻译此文来向那些正在或即将陷入React或React-Native深坑的同胞们表示慰问.网上已经有 ...

  9. codeforces 597C C. Subsequences(dp+树状数组)

    题目链接: C. Subsequences time limit per test 1 second memory limit per test 256 megabytes input standar ...

  10. NHibernate常见问题及解决方法

    NHibernate常见问题及解决方法 曾经学过NHibernate的,但是自从工作到现在快一年了却从未用到过,近来要巩固一下却发现忘记了许多,一个"in expected: <end ...