在总结之前所做的项目时,遇到过下面这种情况。

在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部。但是,我们期望的效果是页脚应该一直处于页面最底部(如右边):

因此我们可以使用 Sticky Footer 布局 来完美实现我们所需要的页面布局。

首先先说一下什么是 “Sticky Footer”

所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果:
如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。
总而言之,就是页脚一直处于最底,效果大致如图所示:

当然,实现这种效果的方法有很多种,其中有通过脚本计算的,有通过 CSS 处理的,脚本计算的方案我们不在本文探讨。
下面我们看看有哪些通过 CSS 可以实现且适用于移动端开发的方案,并分析其中的利弊。

如何实现

假设我们页面的 HTML 结构是这样:

<div class="wrapper">
<div class="content"><!-- 页面主体内容区域 --></div>
<div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
</div>

实现方案一:absolute

通过绝对定位处理应该是常见的方案,只要使得页脚一直定位在主容器预留占位位置。

html, body {
height: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
padding-bottom: 50px;
}
.footer {
position: absolute;
bottom:;
height: 50px;
}

这个方案需指定 html、body 100% 的高度,且 content 的 padding-bottom 需要与 footer 的 height 一致。

实现方案二:calc

通过计算函数 calc 计算(视窗高度 - 页脚高度)赋予内容区最小高度,不需要任何额外样式处理,代码量最少、最简单。

.content {
min-height: calc(100vh - 50px);
}
.footer {
height: 50px;
}

如果不需考虑 calc() 以及 vh 单位的兼容情况,这是个很理想的实现方案。
同样的问题是 footer 的高度值需要与 content 其中的计算值一致。

实现方案三:table

通过 table 属性使得页面以表格的形态呈现。

html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
min-height: 100%;
}
.content {
display: table-row;
height: 100%;
}

我们需要注意的是,使用 table 方案存在一个比较常见的样式限制,通常 margin、padding、border 等属性会不符合预期。
因此不建议使用这个方案。当然,问题也是可以解决的:别把其他样式写在 table 上。

实现方案四:Flex

Flex 是非常适合实现这种效果的,使用 Flex 实现不仅不需要任何额外的元素,而且允许页脚的高度是可变的。

虽然大多数 Flex 布局常用于水平方向布局,但别忘了实际上它也可用于垂直布局,所以你需要做的是将垂直部分包装在一个 Flex 容器中,并选择要扩展的部分,他们将自动占用其容器中的所有可用空间。

html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex:;
}

需要注意的是想要兼容各种系统设备,需要兼顾 flex 的兼容写法。

以上4中方案每个实现的方法其实大同小异,同时也都有自己的利弊。所示可以按照实际情况来使用。

 

【css技能提升】完美的 Sticky Footer 布局的更多相关文章

  1. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  2. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

  3. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  4. 前端经典布局:Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  5. sticky footer布局,定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

  6. sticky footer布局

    一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...

  7. css sticky footer 布局

    方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...

  8. css sticky footer布局

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...

  9. 【css技能提升】css高级技巧

    本文是一个帮你提升 CSS 技巧的收藏集. 使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格.您可以使用CSS reset 库Normalize等,也可以使用一个更简化的复位方法: * ...

随机推荐

  1. Selenium简单回顾

    一.Selenium介绍 1.Selenium(浏览器自动化测试框架): Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的 ...

  2. GIT的前世今生

    在重点介绍GIT的一些操作之前,我们首先来说一说GIT的前世今生,了解整个版本控制的变迁能够让我们知道该如何去选择这些工具,另外通过这些技术的变迁也能够让我们对现在的技术有着更加深入的理解,在正式介绍 ...

  3. MySQL中KEY、PRIMARY KEY、UNIQUE KEY、INDEX 的区别

    参考:MySQL中KEY.PRIMARY KEY.UNIQUE KEY.INDEX 的区别 对于题目中提出的问题,可以拆分来一步步解决.在 MySQL 中 KEY 和 INDEX 是同义.那这个问题就 ...

  4. python设计模式第二十天【迭代器模式】

    1.不使用迭代器出现的问题 (1)容器承担了太多的功能,一方面提供添加和删除等功能,还需提供遍历访问功能 (2)在容器访问遍历过程中,需要保存遍历状态,当和元素的添加和删除混杂在一起时,容易引起混乱 ...

  5. 【README.md】Markdown语言常用语法

    转自:http://blog.csdn.net/zhaokaiqiang1992 这里只介绍最常用和最常见的功能,若想查看全部的语法,请移步http://wowubuntu.com/markdown/ ...

  6. npm火速上手

    npm,即node  package manager,翻译过来就是“node包管理工具”.“node包”是啥呢?它就是jquery啦.bootstrap啦之类的各种版本. 1.npm的安装 第一步,下 ...

  7. CentOS安装、配置Nginx反向代理

    添加Nginx存储库 sudo yum install epel-release 安装Nginx sudo yum install nginx 启动Nginx sudo systemctl start ...

  8. HTML5-canvas-基础篇

    <canvas>新元素 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来 ...

  9. 抓包工具Fiddler的使用说明

    软件介绍 Fiddler是一个C#实现的浏览器抓包和调试工具,fiddler启用后作为一个proxy存在于浏览器和服务器之间,从中监测浏览器与服务器之间的http/https级别的网络交互.目前可以支 ...

  10. F - Count the Colors ZOJ - 1610 线段树染色(染区间映射)

    题意:给一段0-8000的线段染色 问最后 颜色x 有几段 题解:标准线段树  但是没有push_up  最后查询是单点按顺序查询每一个点 考虑过使用区间来维护不同的线段有多少种各色的线段  思路是 ...