<!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. BZOJ4006 [JLOI2015]管道连接

    裸的状压DP 令$f_S$表示包含颜色集合S的最小斯坦纳生成森林的值,于是有: $$f_S=\min\{f_S,f_s+f_{S-s}|s\subset S\}$$ 然后嘛...还是裸的斯坦纳树搞搞. ...

  2. Java 生成压缩包，ZipOutputStream的使用

    案例:根据url 获取网络资源A,B,C   将资源A,B,C放在一起生成一个xxx.zip 直接看代码 import java.io.File; import java.io.FileOutputS ...

  3. linux 下echo命令写入文件内容

    http://blog.csdn.net/xukai871105/article/details/35834703 echo "Raspberry" > test.txt

  4. C#启动一个外部程序(1)-WinExec

    C#启动一个外部程序(1)-WinExec 调用Win32 API.1. using System.Runtime.InteropServices; 2. //        //#define SW ...

  5. hdu 4622 Reincarnation

    http://acm.hdu.edu.cn/showproblem.php?pid=4622 用字典树把每一个字符串对应成一个整数 相同的字符串对应到相同的整数上 把所用的串对应的整数放在一个数组里 ...

  6. LA 5061 LCA tarjan 算法

    题目大意: 给定所有点的权值都为0,给定一棵树以后,每次询问都要求给定两点 x , y 和一个权值w,要求x,y路径上所有点权值加上w,最后求出每一个节点的值 这里因为查询和点都特别多,所以希望能最后 ...

  7. K2十年：专注BPM

    <聚·谋·变——K2中国用户大会> 导演:K2中国 主演:K2用户 时长:420分钟 票价:免费 上映日期:2015年7月17日 查看完整视频请关注K2官方微信账号

  8. Microsoft Mole原理及常见问题整理

     Moles与Moq(Rhino.Mocks)比较 作用范围 Moq与Rhino.Mocks这类的Mock是对Interface或AbstractClass做Mock, 而Moles是Mock整个 ...

  9. tornado介绍

    一.定义 tornado是一个异步非阻塞模型的服务器(tcp/http).web框架. 二.特性 1.高并发 原因:其一,网络事件循环部分根据操作系统选择最高效的,如Linux会是epoll: 其二, ...

  10. Program C 暴力求解

    Description   A ring is composed of n (even number) circles as shown in diagram. Put natural numbers ...