固定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/ ...
随机推荐
- 【Gym 100812C】Story of Princess (走完图所有边)
BUPT2017 wintertraining(15) #7A 题意 给你一个图,n个点m条边,求走遍所有边,至少经过几次点,及输出依次经过的点.n and m (2 ≤ n ≤ 10^5, 1 ≤ ...
- shell getopts用法
eg:sh test.sh -u tom -p 123456: getopts的使用形式:getopts OPTION_STRING VAR: OPTION_STRING:-u,-p这种自定义选项: ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- poj3926 parade (单调队列+dp)
题意:有n行路,每行路被分成m段,每一段有长度和权值,要求从最下面一行走到最上面一行某个位置,可以从相邻两行的同一列交点往上走,并且在同一行走的长度要<=K,求走过的最大权值 设f[i][j]为 ...
- 洛谷 P5020 【货币系统】
谁说这一定要排序的,这就是个装满背包嘛 \({f[i]}\) 表示 \(i\) 面值最多能被几张钱表示 则若其不能被表示 \(f[i]=-inf\) 能表示且只有它自己则 \(f[i]=1\) 初始化 ...
- can物理信号-----------显性和隐性
can信号使用差分电压传送,两条信号线被称为CAN_H和CAN_L.静态时均是2.5v左右,此时状态表示为逻辑“1”,也可以叫做隐性.用CAN_H比CAN_L高表示逻辑“0”,称为显性,此时通常电压值 ...
- centos7安装sonarqube6.7 代码质量管理平台
应用介绍:SonarQube是一个用于代码质量管理的开源平台,用于管理源代码的质量通过插件形式: 可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groov ...
- Spring 声明式事务
事务的特性/概念 事务:一组操作要么都成功要么失败: 事务的四个关键属性(ACID): 原子性(atomicity):“原子”的本意是“不可再分”,事务的原子性表现为一个事务中涉及到的多个操作在逻辑上 ...
- pre标签内文本自动换行
pre标签内文本自动换行 给pre标签添加一个css样式 pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* ...
- Git错误汇总
Git提示rejected To github.com:zhuxiaoxi/Web-Demo.git ! [rejected] master -> master (fetch first) er ...