固定footer在底部
链接:https://www.zhihu.com/question/23220983/answer/25880123
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
这个是css中比较经典的问题。
这里固定在底部包括两种情况,第一种是当页面内容尚未填充满的时候,页脚需要固定在底部,第二种是页面填充满后,页脚需要随页面内容的增加而填充在主体内容的下方。
由于受书写模式的影响,一般情况下无法直接将一元素置于垂直的某一位置,除非使之脱离普通流。而脱离普通流后就很难满足第二种要求,这种情况下也可借助js进行计算进行定位,但这种效果可能由于计算时间和浏览器渲染的问题发生跳动(没亲自试过)。因此,这里提供一种比较通用的,基于普通文档流的解决方法。
具体解决方案:直接来代码。
<html>
<head>
<style type="text/css">
html,body{height:100%}
.footer {margin-top:-30px;height:30px;background-color:#eee;}
.wrap{min-height:100%}
.main{padding-bottom:30px;overflow:hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="main">这里是网页的主体</div>
</div>
<div class="footer">这里是页脚</div>
</body>
</html>
思路就是创建一个足够大的容器wrap包含整个网页,并将footer挤到底端,通过设置margin-top:-30px使之上浮,并在main中设置padding-bottom使之能够容下页脚而不重叠。
固定footer在底部的更多相关文章
- HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...
- 网站设计:将Footer固定在浏览器底部
在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...
- 让footer固定在页面底部(CSS-Sticky-Footer)
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- 【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
- 将HTML页面页脚固定在页面底部(多种方法实现)
当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
- 如何将页脚固定在页面底部,4中方法 转载自:W3CPLUS
原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...
- 始终让footer在底部
1.footer保持在页面底部 需求: 我们希望footer能在窗口最底端,但是由于页面内容太少,无法将内容区域撑开,从而在 footer 下面会留下一大块空白 第一种方法:采用 flexbox布局模 ...
- 原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死
需求的表格比较复杂(各种合并新增删除),elementUi的table组件无法满足需求,故而写了原生table,且与其他用了table组件的表格保持一致. 贴一下简单的代码,只实现操作按钮固定右侧以及 ...
- 页面元素固定在页面底部的纯css代码(兼容IE6)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Docker 私有仓库 Harbor registry 安全认证搭建 [Https]
Harbor源码地址:https://github.com/vmware/harborHarbort特性:基于角色控制用户和仓库都是基于项目进行组织的, 而用户基于项目可以拥有不同的权限.基于镜像的复 ...
- 洛谷P1829 [国家集训队]Crash的数字表格
题目描述 今天的数学课上,Crash小朋友学习了最小公倍数(Least Common Multiple).对于两个正整数a和b,LCM(a, b)表示能同时整除a和b的最小正整数.例如,LCM(6, ...
- 【BZOJ3874】[AHOI&JSOI2014]宅男计划(贪心,三分)
[BZOJ3874][AHOI&JSOI2014]宅男计划(贪心,三分) 题面 BZOJ 洛谷 题解 大力猜想一最长的天数和购买外卖的总次数是单峰的.感性理解一下就是买\(0\)次是\(0\) ...
- 【BZOJ5317】[JSOI2018]部落战争(凸包,闵可夫斯基和)
[BZOJ5317][JSOI2018]部落战争(凸包,闵可夫斯基和) 题面 BZOJ 洛谷 题解 很明显我们只需要两个凸包\(A,B\). 假设询问给定的方向向量是\(v\). 那么现在就是判断\( ...
- VS编译LESS插件
1. LESS 用LESS写CSS可以用写程序代码的习惯写CSS.用了之后写CSS的效率会提高很多. 2.解释LESS 写出来的文件扩展名是.less,要运行的话,先解释成正常的CSS文件. 3. ...
- c# double decimal
两种类型 double范围比decimal大,精度比之低 类型 大致范围 精度 .NET Framework 类型 double ±5.0 × 10−324 到 ±1.7 × 10308 15 到 1 ...
- 蓝桥杯试题 k倍区间(dp)
问题描述 给定一个长度为N的数列,A1, A2, ... AN,如果其中一段连续的子序列Ai, Ai+1, ... Aj(i <= j)之和是K的倍数,我们就称这个区间[i, j]是K倍区间. ...
- 源码分析-AutoCloseable
AutoCloseable 该接口用于try-with-resources语法糖提供支持,用于自动关闭资源作用 类型:接口 方法:close(); 详解: close():用于自动关闭资源的时候需要进 ...
- nodejs的某些api~(一)node的流2
可写流writablewritable.write(chunk, [encoding], [callback])chunk {String | Buffer} 要写入的数据encoding {Stri ...
- QML-关于Qt.rgba()颜色无法正常显示问题
GitHub:八至 作者:狐狸家的鱼 本文链接:关于Qt.rgba()颜色的正确写法 当在正常给color属性写颜色的时候,用十六进制能正常显示,但是用Qt.rgba()时,颜色无法正常显示出来. 按 ...