先看看实现效果：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. AHD/TVI/CVI/CVBS/IP

    1.CVBS是最早的模拟摄像机,现在看来效果差. 2.AHD   TVI   CVI都是模拟摄像机的升级版,俗称同轴,三种名称只是用的方案系统不一样而已,相比模拟的效果清晰,和模拟的外观都是一样的bn ...

  2. JMeter的下载安装以及运行教程

    一.安装JMeter的必要准备 1.安装JDK JDK下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html ...

  3. (转)Unity内建图标列表

    用法 Gizmos.DrawIcon(transform.position, "PointLight Gizmo"); UnityEditor.EditorGUIUtility.F ...

  4. win2003无线网卡驱动无法安装解决方法

    Windows 2003 Server对无线网卡的pci资源分配出了问题,而笔记本bios中屏蔽了pci配置项,无法修改. 打开资源管理器菜单,工具-文件夹选项-显示,去掉“隐藏受保护的操作系统文件” ...

  5. [置顶网]POWER 9为云与智能打造强大引擎

    POWER 9为云与智能打造强大引擎 关键字: 浪潮商用机器 POWER9 至顶网服务器频道 (文/董培欣): 从全球角度看,政治经济波动持续.逆全球化趋势抬头.技术加速变革商业等因素促使企业需要数字 ...

  6. Tomcat Jboss Apache WebLogic区别与比较(阿里面试)

    1. Tomcat是Apache鼎力支持的Java Web应用服务器,只能做JSP和Servlet的Container,不支持EJB,由于它优秀的稳定性以及丰富的文档资料,广泛的使用人群,从而在开源领 ...

  7. R vs Python，数据分析中谁与争锋？

    R和Python两者谁更适合数据分析领域?在某些特定情况下谁会更有优势?还是一个天生在各方面都比另一个更好? 当我们想要选择一种编程语言进行数据分析时,相信大多数人都会想到R和Python——但是从这 ...

  8. 【BZOJ1201】[HNOI2005]数三角形（暴力）

    [BZOJ1201][HNOI2005]数三角形(暴力) 题面 BZOJ 洛谷 题解 预处理每个点向四个方向可以拓展的最大长度,然后钦定一个点作为三角形的某个顶点,暴力枚举三角形长度,检查这样一个三角 ...

  9. 洛谷P4211 LCA

    题意:多次询问,每次求点的标号在[l, r]之间的所有点到点z的lca的深度. 解:看到这题有没有想到某一道很熟悉的题?紫妹和幽香是17岁的少女,喜欢可爱的东西...... 显然这就是开店的超级无敌弱 ...

  10. linux文件名匹配——通配符使用

    背景:在linux使用过程中,经常需要查找文件,对命令中的通配符pattern和正则表达式的区分不是很清楚.有必要好好研究一下. 1 扫盲 1.1 通配符和正则表达式 当在使用命令行时,有很多时间都用 ...