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

先把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. 算法模板——splay区间反转 1

    实现的功能:将序列区间反转,并维护 详见BZOJ3223 var i,j,k,l,m,n,head,a1,a2:longint; s1:ansistring; a,b,c,d,fat,lef,rig: ...

  2. PDO（20161107）

    PDO MySQLI是针对MySQL数据库扩展的,是专门访问MySQL数据库的 PDO是一个数据库访问的一个扩展类,通过一个类访问多个数据库,就是一个数据访问抽象层,把类结合在一块了 可以访问别的数据 ...

  3. iOS网络编程笔记——Socket编程

    一.什么是Socket通信: Socket是网络上的两个程序,通过一个双向的通信连接,实现数据的交换.这个双向连路的一端称为socket.socket通常用来实现客户方和服务方的连接.socket是T ...

  4. 手动编写JQUERY插件

    就拿一个简单的示例来说,鼠标点击输入框,提示文字消息,鼠标移开,再显示提示文字. <script type="text/javascript"> //编写插件 (fun ...

  5. MVC学习笔记3 - JsRender

    许多发展平台减少代码和简化维护,使用模板和 HTML5 和 JavaScript 也不例外. JsRender 是一个 JavaScript 库使您可以一次定义一个样板文件结构,并使用它来动态地生成 ...

  6. Vue.js 2.2 卡片api

    给vue开发者和爱好者发送点福利! 卡片上一共117个api,方便查阅 网址: https://vuejs-tips.github.io/cheatsheet Github: https://gith ...

  7. ajax使用及代码表示

    最近学习了ajax,记录一下学习写过的代码和一些问题 一.原生ajax var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpReq ...

  8. smokeping安装部署最佳实践

    1.1安装smokeping [root@linux-node2 ~]# cat /etc/redhat-release              #查看服务器信息 CentOS release 6. ...

  9. [SinGuLaRiTy] 数论基础

    [SinGuLaRiTy-1004] Copyright (c) SinGuLaRiTy 2017 . All Rights Reserved. 整除: 设a,b为整数,且a不为0,如果存在一个整数q ...

  10. 老李推荐：第5章6节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 初始化事件源

    老李推荐:第5章6节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 初始化事件源   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试 ...