先看看实现效果：http://getbootstrap.com/2.3.2/examples/sticky-footer.html

当一个网页比较简单，内容比较少使得网页不足浏览器高的时候，为了显示更合理，我们希望让 footer 部分显示在浏览器的底部。即让页面内容刚好满屏，这样视觉效果会比较好。

我们页面内容布局是这样的：

  <body>

    <div id="wrap">

      <div id="main">

      </div>

    </div>

    <div id="footer">

    </div>

  </body>

　　

下面描述下用stickey-footer的实现方案：

/*

Sticky Footer Solution

by Steve Hatcher

http://stever.ca

http://www.cssstickyfooter.com

*/

* {margin:;padding:;} 

/* must declare 0 margins on everything, also for main layout components use padding, not

vertical margins (top and bottom) to add spacing, else those margins get added to total height

and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;

    padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;

    margin-top: -180px; /* negative value of footer height */

    height: 180px;

    clear:both;} 

/*Opera Fix*/

body:before {/* thanks to Maleika (Kohoutec)*/

content:"";

height:100%;

float:left;

width:;

margin-top:-32767px;/* thank you Erik J - negate effect of float*/

}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>

    <style type="text/css">

        #wrap {display:table;height:100%}

    </style>

<![endif]-->

*/

stickey-footer实现footer固定页面底部的更多相关文章

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

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

  2. 让footer始终待在页面底部

    1.把html和body的height属性设为100%;保证content的高度能撑满浏览器; 2.把#content的高度也设置为100% ,但是这里我们使用了“min-height”属性,而不是的 ...

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

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

  4. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  5. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  6. HTML5+CSS把footer固定在底部

    在刚开始给网页写footer的时候,我们会碰到一个让人烦躁的问题:当页面内容太少时,footer显示在了页面中间,这是我们不希望出现的,我们希望它能够永远呆在底部,不管网页的内容是多还是少.下面的代码 ...

  7. CSS-设置Footer始终在页面底部

    Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...

  8. HTML 中使 footer 始终处于页面底部

    通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...

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

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

随机推荐

  1. FINAUNCE金融业增速反弹信贷投放创新高叠加股市回暖

    FINAUNCE金融业增速反弹信贷投放创新高叠加股市回暖,金融业增加值增速回暖,不过难以回到2015年的巅峰. 国家统计局4月18日发布的数据显示,今年一季度,国内生产总值21.34万亿元,按可比价格 ...

  2. muduo网络库学习笔记(三)TimerQueue定时器队列

    目录 muduo网络库学习笔记(三)TimerQueue定时器队列 Linux中的时间函数 timerfd简单使用介绍 timerfd示例 muduo中对timerfd的封装 TimerQueue的结 ...

  3. 高可用Kubernetes集群-14. 部署Kubernetes集群性能监控平台

    参考文档: Github介绍:https://github.com/kubernetes/heapster Github yaml文件: https://github.com/kubernetes/h ...

  4. 转载：ArcEngine 唯一值查询

    转载 http://virgoooos.iteye.com/blog/512329 转载:http://blog.csdn.net/mydriverc/archive/2007/07/26/17092 ...

  5. PAT甲题题解-1029. Median (25)-求两序列的中位数，题目更新了之后不水了

    这个是原先AC的代码,但是目前最后一个样例会超内存,也就是开不了两个数组来保存两个序列了,意味着我们只能开一个数组来存,这就需要利用到两个数组都有序的性质了. #include <iostrea ...

  6. 2-Thirteenth Scrum Meeting-10151213

    任务安排 成员 今日完成 明日任务 闫昊 获取视频播放进度  用本地数据库记录课程结构和学习进度 唐彬  阅读IOS代码+阅读上届网络核心代码  请假(编译……) 史烨轩 下载service开发    ...

  7. Teechart使用记录

    一.      Chart 1.1 Series 在该界面可以进行曲线的添加.删除.修改 1.2 General 在该界面 Margins 可以设置整个坐标系外边距. 在这里可是设置放大功能. All ...

  8. 项目复审——Beta阶段

    排名原则还是基于这个组到底自己做了多少东西,又借鉴了多少东西,不过其他组的具体情况我也不一定说的清楚,所以只是通过大家的码云和一些了解来评判的.当然,是否发布也是一个重要指标.顺便感叹一句,现在的云平 ...

  9. 这个C#程序真了不起

    (1)在2~31中,这个数不能且仅不能被两个相邻数整除 (2)2 123 581 660 200 (2,3,4,5,6,7,8,9,10,11,12,13,14,15,18,19,20,21,22,2 ...

  10. [2017BUAA软工]个人阅读作业+总结

    阅读作业 没有银弹 No Silver Bullet - Essence and Accidents of Software Engineering - Brooks 在这篇论文中,作者阐述了软件的四 ...