记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件，所有网页共用，这样比较方便修改，然而，，，我发现某些方法里尾部会紧跟在头部后面，把内容挤在下面。。而且有的页面内容少的话不能把尾部挤到最下面，所以，这次来研究一下怎么能让尾部一直在下面。。
先把html代码放出来：
<body>
<div class="header">头部</div> <div class="content">
内容<br />
内容<br />
内容<br />
内容<br /> 同上，以下省略N行。。。
</div> <div class="footer">尾部</div>
</body>
方法一：其实这个应该是始终位于浏览器窗口底部的方法，而不是位于网页底部的方法，就像是在浏览某些网页在未登录或者注册的时候下面始终有一行提示信息的样式，大概就和回到顶部按钮是一样的。。
上个图：大概就是这样的
CSS代码：
body{position:relative;height:100%;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;position: fixed;left:;bottom:;}
需要给footer设置固定高度
方法二: 这个是让footer位于网页底部的方法 固定footer高度+绝对定位
body{position:relative;height:100%;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;position: absolute;left:;bottom:;}
在中间的内容部分加上padding-bottom是为了让内容能够完全显示不被footer覆盖，同时也要给footer设置固定高度
方法三：固定footer高度+margin负值
html代码有所不同：
<body>
<div class="wrap">
<div class="header">头部</div>
<div class="content">
内容<br />
内容<br />
内容<br />
内容<br />
同上，以下省略N行。。。
</div>
<div class="footer">尾部</div>
</div>
</body>
CSS代码：
body{height: 100%;}
.wrap{min-height: 100%;}
.header{height: 100px;background-color: greenyellow;}
.content{background-color: gray;padding-bottom: 100px;}
.footer{height: 100px;width: 100%;background-color: blueviolet;margin-top: -100px;}
内容里加padding-bottom同上
附图：
内容较少的时候：
内容多的时候：
在共用尾部的网页里测试也没问题 ԅ(¯﹃¯ԅ)妥妥的
记一些让footer始终位于网页底部的方法的更多相关文章
- 让footer始终位于页面的最底部
http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...
- footer部分，当页面主题内容不满一屏时，始终位于页面底部
比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...
- HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...
- CSS-设置Footer始终在页面底部
Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...
- HTML5将footer置于页面最底部的方法(CSS+JS)
JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ ...
- HTML的footer置于页面最底部的方法
方法一:footer高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:%; ...
- 页面内容不够高footer始终位于页面的最底部
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...
- 用CSS实现定位DIV绝对位于网页底部
网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG.尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美. 下面是我找到的一个比较完美的方法,来自国外的设计达人, ...
- 如何让footer一直在网页底部（不使用绝对定位并且网页不论长度多长）
html: <html> <head> <link rel="stylesheet" href="layout.css" ... ...
随机推荐
- 1339 / 1163: [Baltic2008]Mafia
1163: [Baltic2008]Mafia Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 96 Solved: 60[Submit][Statu ...
- 1588: [HNOI2002]营业额统计
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 9203 Solved: 3097[Submit][Stat ...
- swift -- as / 扩展
一.使用 可选链式 调用代替强制展开 //当声明一个属性时,将属性类型设置为可选类型: 好处: 当可选类型的属性被赋予初始值时,系统调用初始值;当可选类型属性没有赋予初始值时,系统只会调用失败;如果属 ...
- 九度OJ题目1076：N的阶乘 (java)运用BigInteger的例子。
题目描述: 输入一个正整数N,输出N的阶乘. 输入: 正整数N(0<=N<=1000) 输出: 输入可能包括多组数据,对于每一组输入数据,输出N的阶乘 样例输入: 4 5 15 样例输出: ...
- SEO-外部链接类型以及标准
外部链接 外链的作用:宣传你的网站 相信大家都听过"内链为王,外链为皇"这句话,不管这句话对不对,从这句话上面,我们都能体会到外链的重要性. 外链类型: 1.博客 2.论坛 3.分 ...
- Broken pipe错误终极解释
叙述 想必或多或少在Java的服务器都会遇到过这种异常,如下图 由于Java偏上层,日常开发接触系统底层的机会偏少,要搞清楚什么原因导致的这种异常,肯定是先要百度google一番. 网络 ...
- 在Chrome中安装PostMan用来测试SpringBoot程序
1. 首先下载一个PostMan的插件,Postman_v4.1.3.crx 下载下来为这种类型的文件. 2. 在Chrome中输入chrome://extensions/ 这个,打开Chrome的扩 ...
- “倔驴”一个h5小游戏的实现和思考（码易直播）——总结与整理
3月23日晚上8点半(中国队火拼韩国的时候),做了一期直播分享.15年做的一个小游戏,把核心代码拿出来,现场讲写了一遍,结果后面翻车了,写错了两个地方,导致运行效果有点问题,直播边说话边写代码还真不一 ...
- Linux之split命令
split - split a file into pieces 切割一个文件至多片 参数: -a, --suffix-length=N 使用的后缀的长度,默认长度为2,例如'aa','ab' ...
- 通过 dhcp-agent 访问 Metadata - 每天5分钟玩转 OpenStack（168）
OpenStack 默认通过 l3-agent 创建和管理 neutron-ns-metadata-proxy,进而与 nova-metadata-api 通信.但不是所有环境都有 l3-agent, ...