<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>
* {
margin:0;
padding:0;
}
html,body, #wrap
{
height: 100%;
}
body > #wrap
{
height: auto;
min-height: 100%;
}
#main
{
padding-bottom: 150px;
} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
border-color:1px solid red;
background:red;
}
/* CLEAR FIX*/
.clearfix:after
{content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;
}
/* Hides from IE-mac */
.clearfix { height: 1%;/*zoom:1*/
}

</style>
</head>
<body>
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer"> sagsdhgdf
</div>
</body>
</html>
你会发现，页脚的高度在这里被重复使用了三次，这是至关重要的，而且三个高度必须使用同样的值。wrap <div>的height属性把自己拉伸至窗口全部高度的尺寸，负的margin会把footer提高到main <div>的padding的位置上去，因为main已经在wrap的里面，所以main的padding已经是wrap 100%高度的一部分。 这样，footer就留在页面的底部了。

现在还不算完成，我们还需要去clearfix main <div>。
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}

Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)的更多相关文章

  1. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

  2. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  3. html 设置页脚div一直在页面底部

    先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...

  4. css让footer永远保持在页面底部

    案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...

  5. 天书笔记：如何创建一个现代的footer（页脚）

    此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 老规矩,效果图 这个布局也是从b站看到的,回来自己实现了一遍 HTML: <div ...

  6. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  7. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  8. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  9. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

随机推荐

  1. [转]JDK6和JDK7中的substring()方法

    substring(int beginIndex, int endIndex)在JDK6与JDK7中的实现方式不一样,理解他们的差异有助于更好的使用它们.为了简单起见,下面所说的substring() ...

  2. Solr 4.3.0 配置Data import handler时出错

    启动solr的时候,居然出现了如下的错误: org.apache.solr.common.SolrException: RequestHandler init failure        at or ...

  3. 执行MAVEN更新包

    我们一般使用 mvn eclipse:eclipse 执行对maven库的引用,这样会修改项目下的classpath文件. 我们修改直接在eclipse 使用maven库作为项目的引用. 步骤如下: ...

  4. RemoveDPC

    HOOKSSDT中加入了DPC之后 要取消DPC 首先找到DPCHookSSDT.sys的基地址和大小 通过枚举所有DPC的地址  将在范围之内的DPC定时器全部移除 枚举DPC: WinXP: 1. ...

  5. Sticks（poj1011/uva307）

    题目大意: 乔治有一些碎木棒,是通过将一些相等长度的原始木棒折断得到的,给出碎木棒的总数和各自的长度,求最小的可能的原始木棒的长度:(就是将一些正整数分组,每组加起来和相等,使和尽可能小) 一开始做p ...

  6. PhpStorm WebMatrix xDebug 配置开发环境

    1.首先下载WebMatrix安装程序,下载地址 http://www.microsoft.com/web/webmatrix/  安装步骤 参考:http://www.jb51.net/softjc ...

  7. Java 类的一般特征

    1. 创建类的对象时的内存结构 用图来解释: 使用new 创建 a1 时,成员变量的值都是初始默认值. 然后显式的改变其属性的值. 创建a3 时,a3 是直接指向 a1, 即a3 = a1, 两个对象 ...

  8. 元数据和DbUtils

    使用元数据可以在jdbc中获取数据库的定义,例如:数据库.表.列的定义信息. 在jdbc中可以使用: 数据库元数据.参数元数据.结果集元数据. 1.DataBaseMetaData对象 Connect ...

  9. 创建plist文件

    可以先在工程中直接新建一个plist文件,往里面写入自己需要的数据.但是这里的plist文件我们无法修改,是只读的,我们可以将这个plist文件复制一份到沙盒中,然后对沙盒中的文件进行操作.具体代码如 ...

  10. for循环和while循环的区别

    public class Xunhuanqubie { public static void main(String[] args){ int i = 0; while(i<8){ System ...