Sticky Footer绝对底部的实现
来源:互联网 发布:网络攻防教育培训 编辑:程序博客网 时间:2024/06/05 21:13
Sticky Footer绝对底部的实现
介绍一下如何用实现Sticky Footer绝对底部。
目录:
- Sticky Footer绝对底部的实现
- 问题
- 解决方案
- 效果展示
- 另一种更加简单的解决方案 CSS3
问题
有时候,我们在移动端想实现这样的一个效果:当页面的内容不够多的时候,我们希望底部的部件一直能位于窗口的底部,当页面内容足够多的时候,底部的部件能被内容挤下去,不会和正文内容重叠覆盖。这就是Sticky Footer绝对底部。
解决方案
<div id="content">content</div><div id="footer">footer</div>
假设我们一开始的布局时这样的,内容部分和底部部分,那么为了实现绝对底部,我们首先需要在内容部分加一层 div ,就像这样:
div id="wrap"> <div id="content">content</div></div><div id="footer">footer</div>
然后给他们加上实现绝对底部的样式:
html,body { height: 100%;}body > #wrap { height: auto; min-height: 100%;}#content { /* padding-bottom 等于 footer 的高度 */ padding-bottom: 50px;}#footer { position: relative; width: 100%; height: 50px; /* margin-top 为 footer 高度的负值 */ margin-top: -50px; clear:both;}
形成如下所示的布局:
需要注意的是,现在 wrap 和 footer 是同一级的。
其实原理很简单,我们给内容区域设置 min-height: 100%,将 footer 挤到屏幕下方,然后给 footer 添加 margin-top,其值为 footer 高度的负值,就能让 footer 又回到屏幕底部!
这样,就实现了Sticky Footer绝对底部。
效果展示
(body背景色为灰色,content背景色为黄色,底部背景色为绿色)
一开始,内容区域内容偏少的时候:
我们可以看到一个关闭按钮还是在底部的。
然后当内容足够多的时候:
我们可以看到,底部的关闭按钮已经被挤下去了!
我们把滚动条滚下看看:
这时候,我们就可以看到底部的关闭按钮了。
另一种更加简单的解决方案 (CSS3)
上面的方法的确有点麻烦,其实我们可以通过 CSS3 的 calc() 函数来实现绝对底部。
//html代码<div id="content">content</div><div id="footer">footer</div>//css代码#content { min-height: calc(100% - 50px); /* 减去的高度为footer的高度 */} #footer { height: 50px;}
我们可以看看它的布局方式:
就是这么简单,我们使用 CSS3 的 calc() 函数,我们把内容区域的最小高度(min-height)设置为100%减去底部 footer 的高度,显而易见,这样当内容部分不够多的时候,它的高度为最小高度,加上底部部分就刚好是屏幕的总高度了!这样就实现了 Sticky Footer 绝对底部效果。
当然,值得注意的是,因为 calc() 是CSS3的一个新增功能,所以在浏览器的兼容性上可能会有问题。
CSS3 的 calc() 函数允许我们在写CSS代码的时候通过计算来决定一个 CSS 属性的值。(关于 CSS3 的 calc() 函数的知识可以看看这里)。
- Sticky Footer绝对底部的实现
- Sticky Footer: 完美的CSS绝对底部
- Sticky Footer: 完美的CSS绝对底部
- CSS Sticky Footer: 完美的CSS绝对底部
- CSS Sticky Footer: 完美的CSS绝对底部
- CSS Sticky Footer: 完美的CSS绝对底部
- CSS Sticky Footer: 完美的CSS绝对底部
- CSS Sticky Footer: 完美的CSS绝对底部
- flex实现经典的sticky footer布局
- Sticky Footer 让页脚紧贴页面底部
- CSS Sticky footer完美底部布局
- 怎么使用Sticky Footer代码(让页脚紧贴页面底部的方法)
- 一道经典的css面试题。固定底部(sticky footer)
- #笔记 简单使用flex与sticky footer方式解决底部固定在底栏的问题
- Sticky Footer
- sticky footer
- 如何将页脚固定在页面底部(sticky footer)
- footer随能容高度,固定到底部Sticky footers
- Android学习-Intent实现页面的跳转
- (十一)线索二叉树的创建和遍历(中序)
- 谢尔宾斯基三角(Sierpinski triangle)
- viewpager实现启动页面的无限滑动、可点击导航点(导航点定位)(简单易懂)
- [简单逻辑学]逻辑学的基本原理——直言命题
- Sticky Footer绝对底部的实现
- 面试问题记录
- 构造函数和成员函数
- 10月集训test4
- 二进制中1的个数(剑指Offer 第 11 题)
- 实验二 线性表综合实验之《双链表》
- 有效数字-LintCode
- 强制类型转化小结
- 数组操作中出现的 两种错误