<!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. SpringMVC 配置定时执行任务

    1.在SpringMVC配置文件中添加 xmlns:task="http://www.springframework.org/schema/task" http://www.spr ...

  2. target标签对于优化用户体验的作用

    最近开始关注target="_blank"标签,是源于对咨询区的采纳工作.帖子内容页是在原页面加载,这样问题就来了,每采纳完一个问题,必须得后退好几次才可以,很不方便.后来按ctr ...

  3. 初始hibernate（一）

    Hibernate(开放源代码的对象关系映射框架) Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的or ...

  4. 用JavaScript操作Media Queries

    在响应式(或自适应)设计中要用到Media Queries这个CSS属性,但在某些时候我们需要对Media Queries进行动态操作,这时候可以使用Javascript. 如以下Media Quer ...

  5. CSS 收集

    margin:0 auto margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right, 因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居 ...

  6. ZZC语言代码风格

    程序员之路--关于代码风格 优秀的代码风格如同一身得体的打扮,能够给人以良好的印象.初学程序设计,首先必须建立良好的编程习惯,这其中就包括代码风格.本文就代码风格中的几个重点问题进行了讨论,并在文后给 ...

  7. [转]Visual Studio 2010 单元测试目录

    Visual Studio 2010 单元测试共分七个部分: 普通单元测试.顺序单元测试.压力测试,Generic测试.数据库测试.UI界面测试和Web性能测试. 这个系列的博客实例程序可以在下面的链 ...

  8. VSS Plugin配置FAQ（翻译）[转]

    前言(译者) 就个人的成长历程来说,刚参加工作用的是 CVS ,前前后后有接近三年的使用体验,从今年开始使用 SVN .总的来说我更喜欢 SVN ,用起来的确很方便,例如在本地源代码文件中加一个空格然 ...

  9. shell学习记录003-cat命令

    cat 命令一般用于文件的查看 cat -s file   #可以去除文件中多余的上下空行 cat -T file   #Python编程中会用到的制表符会在该命令中体现出来 cat -n file  ...

  10. [Js]面向对象基础

    一.什么是对象 对象是一个整体,对对外提供一些操作 二.什么是面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节,比如Jquery 三.Js中面向对象的特点 1.抽象:抓住核心问题 2.封装 ...