上次说把网页的头部和尾部分离出来作为一个单独的文件，所有网页共用，这样比较方便修改，然而，，，我发现某些方法里尾部会紧跟在头部后面，把内容挤在下面。。而且有的页面内容少的话不能把尾部挤到最下面，所以，这次来研究一下怎么能让尾部一直在下面。。

先把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始终位于网页底部的方法的更多相关文章

  1. 让footer始终位于页面的最底部

    http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...

  2. footer部分，当页面主题内容不满一屏时，始终位于页面底部

    比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...

  3. HTML 中使 footer 始终处于页面底部

    通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...

  4. CSS-设置Footer始终在页面底部

    Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...

  5. HTML5将footer置于页面最底部的方法(CSS+JS)

    JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ ...

  6. HTML的footer置于页面最底部的方法

    方法一:footer高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:%; ...

  7. 页面内容不够高footer始终位于页面的最底部

    相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...

  8. 用CSS实现定位DIV绝对位于网页底部

    网上有一些解决方案,但会出现当改变窗口高度时,底部和正文重叠的BUG.尽管没有多少人会有事没事儿的去改变窗口高度,但设计嘛,追求的就是尽善尽美. 下面是我找到的一个比较完美的方法,来自国外的设计达人, ...

  9. 如何让footer一直在网页底部（不使用绝对定位并且网页不论长度多长）

    html: <html> <head> <link rel="stylesheet" href="layout.css" ... ...

随机推荐

  1. 使用php ajax写省、市、区、三级联动

    题目要求: 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用china ...

  2. 1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列

    1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 510  S ...

  3. 2431: [HAOI2009]逆序对数列

    2431: [HAOI2009]逆序对数列 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 954  Solved: 548[Submit][Status ...

  4. React 进修之路(2)

    生命周期 React中的组件被看成是一个有生命的个体,因此赋予了声明周期的概念,就是为了定义组件所处的状态 React中组件共分三大周期,11个阶段 创建期(少年,成长)组件创建时候进入的时期 get ...

  5. 使用git克隆指定分支的代码

    今天想学习一下开源中国Android客户端的app源码,源码的Git地址:http://git.oschina.net/oschina/android-app,如下图所示: 由于Master主分支上没 ...

  6. Canvas的下雪效果

    cfs.snow.js canvas 下雪场景 不会影响页面使用 使用方式非常简单 利用这个js文件,我们就能很快的让页面出现下雪的动画效果. 例如 <script type="tex ...

  7. java对String进行sha1加密

    1.使用apache的codec jar包对string进行加密,先下载并引入jar包: http://commons.apache.org/proper/commons-codec/ 2.生成: S ...

  8. Linux云自动化运维第五课

    Linux云自动化运维第五课 一.进程定义 进程就是cpu未完成的工作 二.ps命令 ps a ###关于当前环境的所有进程 x ###与当前环境无关的所有进程 f ###显示进程从属关系 e ### ...

  9. 通过 dhcp-agent 访问 Metadata - 每天5分钟玩转 OpenStack（168）

    OpenStack 默认通过 l3-agent 创建和管理 neutron-ns-metadata-proxy,进而与 nova-metadata-api 通信.但不是所有环境都有 l3-agent, ...

  10. 【Unity编程】Unity中关于四元数的API详解

    本文为博主原创文章,欢迎转载,请保留出处:http://blog.csdn.net/andrewfan Unity中关于四元数的API详解 Quaternion类 Quaternion(四元数)用于计 ...