在制作页面有这样一种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。

　　那么如何将Web页面的 “footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，

　　换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。

方法：

　　1. HTML结构：

<div id="container">

    <div id="header">Header Section</div>

        <div id="page" class="clearfix">

        页面容容部分

        </div>

    <div id="footer">Footer Section</div>

</div>

　　实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了 div#header（头部），div#page（页面主体部分），div#footer（页脚部分）

　　2. CSS代码：

html,body {

  margin:;

  padding:;

  height: 100%;

}

#container {

  min-height:100%;

  height: auto !important;

  height: 100%; /*IE6不识别min-height*/

  position: relative;

}

#header {

    background: #ff0;

    padding: 10px;

}

#page {

    width: 960px;

    margin: 0 auto;

    padding-bottom: 60px;/*等于footer的高度*/

}

#footer {

    position: absolute;

    bottom:;

    width: 100%;

    height: 60px;/*脚部的高度*/

    background: #6cf;

    clear:both;

}

原理：

  1. <html>和<body>标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；
  2. div#container容器：div#container容器必须设 置一个最小高度(min-height)为100％；这主要使他在内容很少（或没有内容）情况下，能保持100％的高度。另外我们还需要在div#container容器中设置一个"position:relative"以便于里面的元素进行绝对定位后不会跑了div#container容器；
  3. div#page容器：div#page这个容器有一个很关键的设置，需要在这个容器上设置一个padding-bottom值，而且这个值要等于（或略大于）页脚div#footer的高度（height）值；
  4. div#footer容器：div#footer容器必须设置一个固定高度。div#footer还需要进行绝对定位，并且设置bottom:0；让div#footer固定在容器div#container的底部，这样就可以实现我们前面所说的效果，当内容只有一点时，div#footer固定在屏幕的底部（因为div#container设置了一个min-height:100%），当内容高度超过屏幕的高度，div#footer也固定在div#container底部，也就是固定在页面的底部。你也可以给div#footer加设一个"width:100%"，让他在整个页面上得到延伸；
  5. 其他div：至于其他容器可以根据自己需求进行设置，比如说前面的div#header,div#left,div#content,div#right等。

CSS 实现底部固定的更多相关文章

  1. CSS实现底部固定

    html代码结构 <body> <div class="wrap"> <div class="head"></div& ...

  2. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  3. CSS Sticky Footer: 完美的CSS绝对底部

    CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...

  4. 微信小程序之顶部固定和底部固定

    顶部固定 <view style="position:fixed;top:0;"> ...... </view> 底部固定 <view style=& ...

  5. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  6. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  7. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  8. css - 紧贴底部的页脚

    有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来,如图: 有的同学可能会想用position:fixed;bottom:0;来永远居底.但有些场景确实不适合. 这是我从YII2中找到的简单解 ...

  9. 解决fixed在苹果手机抖动问题/头部底部固定布局

    1.头部和底部固定,中间内容滚动,不涉及fixed 1)absolute与height:100% <!DOCTYPE html><html><head> <m ...

随机推荐

  1. 总结一下.net framework适合装在哪些系统中

    最近在客户这部署,环境是windows server2003 service pack2.因为vs2012开发环境是.net framework4.5,所以发布iis的时候,尝试在sever2003上 ...

  2. (转)DataTable添加行出现“该行已经属于另一个表”的错误！

    1 DataTable dt1 = new DataTable(); DataTable dt2 = new DataTable(); //为dt1创建结构 DataColumn pName = ne ...

  3. yum mysql

    linux下使用yum安装mysql   1.安装 查看有没有安装过:           yum list installed mysql*           rpm -qa | grep mys ...

  4. BZOJ 1564: [NOI2009]二叉查找树( dp )

    树的中序遍历是唯一的. 按照数据值处理出中序遍历后, dp(l, r, v)表示[l, r]组成的树, 树的所有节点的权值≥v的最小代价(离散化权值). 枚举m为根(p表示访问频率): 修改m的权值 ...

  5. 关于Application Cache

    http://blog.csdn.net/fwwdn/article/details/8082433 http://www.cnblogs.com/blackbird/archive/2012/06/ ...

  6. JavaScript学习笔记（二）原型

    JavaScript不包含传统的类继承模型,而是使用prototype原型模型.JavaScript使用原型链的继承方式. function Foo() { this.value = 42; } Fo ...

  7. 【Chromium中文文档】Chrome/Chromium沙箱 - 安全架构设计

    沙箱 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/Sandbox.ht ...

  8. jquery上传图片

    http://www.cnblogs.com/wutao/archive/2010/01/28/1658496.html http://www.cnblogs.com/cloudgamer/archi ...

  9. DELPHI 任务栏无EXE显示

    需要用到的一个函数: LONG SetWindowLong( HWND hWnd, int nIndex, LONG dwNewLong ); program Project; usesForms,  ...

  10. logstash 根据type 判断输出

    # 更多ELK资料请访问 http://devops.taobao.com 一.配置前需要注意: 1.Use chmod to modify nginx log file privilege. E.g ...