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

先把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. [lua] mac上如何编译snapshot（检测Lua中的内存泄露）

    最近我们的unity手游频繁闪退,只要进入战斗场景,之后一段时间就会闪退,如果是在unity编辑器中则会报出not enough memory的错误!猜测应该是有内存泄漏: 由于我们使用了tolua, ...

  2. 用虚拟机安装Linux系统的过程

    1.打开VMware->点击File->点击New Virtual Machine.. 2.我们选择Custom并点击Next 3.保持默认然后点next 4.选择图中所示内容,点Next ...

  3. jvm 线程实现机制

    简单记一下 实际上jvm 规范中并无做限制. 不同的jvm实现上存在一定差异.技术上的选择主要在 jvm的线程是如何和操作系统的线程对应的.有1:1 的线程实现模式,也有N:1的线程实现模式,更有M: ...

  4. protected private public 的区别

    1.public,protected,private是Java里用来定义成员的访问权限的,另外还有一种是"default",也就是在成员前不加任何权限修饰符.如:    publi ...

  5. TCP/IP笔记(三)数据链路层

    数据链路的作用 数据链路层的协议定义了通过通信媒介互连的设备之间传输的规范.通信媒介包括双绞线电缆.同轴电缆.光纤.电波以及红外线等介质.此外,各个设备之间有时也会通过交换机.网桥.中继器等中转数据. ...

  6. 对VC++6.0爱得深沉（一）安装vc++6.0，支持winXP，win7，win8.1,win10

    [欢迎入坑] 从这里起,我称VC++6.0为小c. 为什么我对小c爱得深沉? 虽然饱受非议,但是,我只想说,我太单纯,小c轻轻松松成功运行在各个win平台,对于我来说她:高速.小巧.便捷.听话.可定制 ...

  7. SHA1l加密

    public static string SHA1Encrypt(string sourceText) { SHA1 sha = new SHA1CryptoServiceProvider(); AS ...

  8. JVM中堆内存和栈内存的区别

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间 ...

  9. dev机上数据库中批量生成table

    我的低效方法: 通过本地php脚本进行create: <?php //0-63 header("Content-type:text/html;charset=utf-8"); ...

  10. docker使用Let’s Encrypt协议构建免费https协议

    简介:我们可以把自己的image上传到dockerhub或者阿里云的docker镜像仓库,但在实际使用中我们很多时候都用的是自己的registry,便于内部的共享等等优点,docker镜像默认支持ht ...