【css技能提升】完美的 Sticky Footer 布局

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

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

因此我们可以使用 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: 0;
    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: 1;
}

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

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

 

时间: 2024-10-26 14:29:51

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

sticky footer布局,定位底部footer

其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sticky footer</title> <style type="text/css"> /* 第一

【CSS 技能提升】 :before和:after的使用

前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式.今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下. 什么是:before和:after? 该如何使用他们? :before是css中的一种伪元素,可用于在某个元素之前插入某些内容.:after是css中的一种伪元素,可用于在某个元素之后插入某些内容. 下面我们先跑个简单的代码测试下效果

CSS Sticky Footer: 完美的CSS绝对底部

下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div

初试 vue2.0——5.项目开发_css sticky footers布局

写在前面的话: 在 w3cplus 上可以看到相关学习资料,本文就是参考了这篇,写下的笔记~,原文 链接 五.css sticky footers布局 一般来说,常会遇到这样的布局:在一个页面的内容不确定的情况下,始终得实现 footer 部分位于页面的底部~ 实现这种布局的方式有很多,据说css sticky footers 是一种兼容性最好的一种布局方式~ 然而最好的方式是:flex 布局~~~ 好用的写在前面,参考原文 1 <!DOCTYPE html> 2 <head> 3

对“粘连”footer布局的思考和总结

经典的"粘连"footer布局 参考文章链接在文章末尾,简单的语言总结如下: 经典的"粘连"footer布局就是.我们有一块内容<main>.当<main>的高度足够长的时候,紧跟在<main>后面的元素<footer>会跟在<main>元素的后面.当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够"粘连"在屏幕的底部.如下

sticky footer

sticky footer: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title> sticky f

两种方式实现sticky footer绝对底部

一.什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送,我们看到的效果就如下面两张图这样.这种效果基本是无处不在的,很受欢迎. 二.第一种方式,利用margin和padding实现 先看效果 下面是代码 <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>margin,padding实现

Cocos2d-x 3.2 大富翁游戏项目开发-第二十七部分 技能提升和游戏结束判断

本节主要是增加技能提升事件 和 游戏结束判断,游戏判断简单处理了一下,只要有一个角色资金小于0 ,就认为游戏结束. 如果人物在3个以上,则需要做进一步处理,比如失败方的房屋如何处理,这些在处理到多个角色的时候再做处理. 1.添加提升技能随机事件 oid GameBaseScene::initRandomAskEvent() { ................. randomAskEventMap.insert(STORM_UP_TAG,LanguageString::getInstance()

Java技能提升之路

James收集Java技能提升方面的资料,分为:基础篇.提高篇.高级篇- 给出"入口",自我提升 1. Java工程师成神之路:http://www.hollischuang.com/archives/489 2. 留给未来...