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

先把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. 2953: [Poi2002]商务旅行

    2953: [Poi2002]商务旅行 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 8  Solved: 8[Submit][Status] Desc ...

  2. 1218: [HNOI2003]激光炸弹

    1218: [HNOI2003]激光炸弹 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1139  Solved: 542[Submit][Statu ...

  3. 1293: [SCOI2009]生日礼物

    1293: [SCOI2009]生日礼物 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1096  Solved: 584[Submit][Statu ...

  4. 腾讯云数据库团队：MySQL AHI 实现解析

    MySQL 定位用户记录的过程可以描述为:打开索引 -> 根据索引键值逐层查找 B+ 树 branch 结点 -> 定位到叶子结点,将 cursor 定位到满足条件的 rec 上:如果树高 ...

  5. Spring DelegatingFilterProxy

    Spring 里面定义了许多 Filter. 比如 OncePerRequestFilter. 如果我们自定义OncePerRequestFilter, 则可以配置到web.xml中进行一些拦截或日志 ...

  6. supermap开发webgis的经验

    SuperMap 开发WebGIS的经验总结 - 综合课件 - 道客巴巴 http://www.doc88.com/p-743552004620.html

  7. webSocket学习与应用

    非原创,版权归原作者所有http://www.cnblogs.com/shizhouyu/p/4975409.html 1.什么是WebSocket WebSocket 是一种自然的全双工.双向.单套 ...

  8. python之函数学习

    #!/usr/bin/env python # # =============================================== # 位置参数说明 # 位置参数 通过参数传递的位置来 ...

  9. 老李分享： 并行计算基础&编程模型与工具 1

    老李分享: 并行计算基础&编程模型与工具   在当前计算机应用中,对高速并行计算的需求是广泛的,归纳起来,主要有三种类型的应用需求: 计算密集(Computer-Intensive)型应用,如 ...

  10. 老李推荐： 第8章4节《MonkeyRunner源码剖析》MonkeyRunner启动运行过程-启动AndroidDebugBridge 4

    这一部分的代码逻辑关系是这样的: 344行: 一个外部循环每次从上次保存下来的设备列表获得一个设备Device实例 350行: 再在一个内部循环从最新的设备列表中获得一个设备Device实例 353行 ...