在制作页面有这样一种现象：当一个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. WisDom .net 工作流设计流程

    1.简单说明       工作流( Foundare WorkFlow)说白了就是工作流程的一些计算机模型,即将工作流程中的工作如何前后组织在一起的逻辑和规则在计算机中以恰当的模型进行表示并对其实施计 ...

  2. Oracle Semaphore Management in UNIX Administration

    Oracle UNIX/Linux Tips by Burleson Consulting Semaphores and Oracle 11g 信号量和数据库 Semaphores are data ...

  3. windows下 Python 安装包的配置

    1.下载安装 Pythonpython-2.7.2.msi  http://www.python.org/download/如下载 Python 2.7.2,安装目录为 C:\Python27 2.添 ...

  4. [string]Regular Expression Matching

    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...

  5. 矩阵乘法的MPI并行计算

    1.问题描述 矩阵乘法问题描述如下: 给定矩阵A和B,其中A是m*p大小矩阵,B是p*n大小的矩阵.求C = A*B. 求解这个问题最简单的算法是遍历A的行和B的列,求得C的相应元素,时间复杂度O(m ...

  6. 各种类型Android源代码

    商城类APPhttp://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=673&extra=page%3D1 电影影院 ...

  7. input submit button iOS webview browser diffrence

    最近做项目用到了webview, 在浏览器中显示正常的input[type="submit"]按钮, 加载到webview中后css里的设置都失效了, webview里渲染的是最原 ...

  8. 第二章——Parcelable接口的使用(跨进程，Intent传输)

    一.Parcelable类(Android独有的) 简介:Parcelable是一个接口. 作用:是Android提供的序列化接口,实现序列化和反序列化的操作. 二.跨进程使用 步骤一:创建Book类 ...

  9. Python成长之路第一篇（4）_if,for,while条件语句

    有了以上的基本基础,已经上面写的几个小练习,大家肯定有很多的不满,比如查询为什么查询一次就退出了呢?下面我们来学习条件语句 一.万恶的加号 以前我们在print的时候如果要加上变量都有是使用+来作为连 ...

  10. cocos2d-x box2d使用调试绘图

    cocos2d-x box2d使用调试绘图 复制TestCpp的GLES-Render.h和GLES-Render.cpp过来. 添加一个成员变量: GLESDebugDraw *m_debugDra ...