Sticky Footer的实现
Sticky Footer即绝对底部,是一种常用的布局方式,页脚在内容区未超出窗口高度时一直保持在最底部显示,而超过窗口高度时则保持在内容区最底部。
有两种实现方法:
第一种:经典的实现方式
html
<div class="box">
<div class="content">
<p>内容区</p>
</div>
</div>
<div class="footer">
<p>页脚</p>
</div>
css:
html,body{
height: 100%;
}
.box{
min-height: 100%; //将footer挤到屏幕最底下
}
.content {
padding-bottom: 60px;
}
.footer {
height: 60px;
margin-top: -60px;
}
这种方法需要将内容区包裹在一个外层容器里,将外层容器的最小高度设置为100%,这样不管内容有多少,footer都将被挤在最下面,还有关键的一点就是要为内容区设置一个padding-bottom,这个值需要和footer的height还有margin-top保持一直,这样footer的就可以显示在内容底部。
第二种:flex布局
html:
<div class="content">
<p>内容区</p>
</div>
<div class="footer">
<p>页脚</p>
</div>
css:
html,body{
display: flex;
height: 100%;
flex-direction: column;
}
.content {
flex:;
}
这种实现方法更加简便,不需要外层包裹层,利用flex的特性,当其值为1的时候会自动分配剩余可用空间,这样只要不为footer设置flex,内容区就将占据处footer的全部空间,而且是自适应大小的,所以不必设置padding和margin。
Sticky Footer的实现的更多相关文章
- CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
- sticky footer布局,定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
- 实现sticky footer的五种方法
2017-04-19 16:24:48 什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 用position实现? 如果是用 ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- Sticky Footer 绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- sticky footer布局
一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...
- Sticky Footer,完美的绝对底部
写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题:在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我 ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
随机推荐
- Use trained sklearn model with pyspark
Use trained sklearn model with pyspark from pyspark import SparkContext import numpy as np from sk ...
- hdu-5784 How Many Triangles(计算几何+极角排序)
题目链接: How Many Triangles Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
- mac laravel 环境变量设置bash_profile
mac laravel 环境变量设置bash_profile >>>vim ~/.bash_profile '''text export PATH=$PATH:~/.composer ...
- manacher(无讲解)
BZOJ3325: [Scoi2013]密码 https://lydsy.com/JudgeOnline/problem.php?id=3325 分析: 根据前i个字符和一些不等和相等条件就可以确定每 ...
- BZOJ4307: Maishroom & Class
感觉有一点题面没有说得特别明确,就是一个人代替了其他人之后,另一个可以被他代替的人就不能让他来代替自己了. 每个人向自己可以代替的人连边,额外增加一个源点$r$向所有助教连边.第一问答案是$r$不能到 ...
- ACM学习历程—HDU5410 CRB and His Birthday(动态规划)
Problem Description Today is CRB's birthday. His mom decided to buy many presents for her lovely son ...
- 百度之星2017初赛A
雪崩,没晋级,补题 1001 分析:求n-1的约数个数 #include "iostream" #include "cstdio" #include " ...
- python爬虫知识点详解
python爬虫知识点总结(一)库的安装 python爬虫知识点总结(二)爬虫的基本原理 python爬虫知识点总结(三)urllib库详解 python爬虫知识点总结(四)Requests库的基本使 ...
- 洛谷 2577 [ZJOI2005]午餐——序列dp
题目:https://www.luogu.org/problemnew/show/P2577 可以从只有一个窗口的角度思考出一个贪心结论.就是应当按吃饭时间(不算打饭时间)从大到小排序.这样交换相邻两 ...
- Poj1007_DNA Sorting(面向对象方法)
一.Description One measure of ``unsortedness'' in a sequence is the number of pairs of entries that a ...