在制作页面有这样一种现象：当一个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. ASPNET程序中常用的三十三种代码

    1. 打开新的窗口并传送参数 response.write("<script>window.open(’*.aspx?id="+this.DropDownList1.S ...

  2. C#核编之X++详解

    重点:当X++单独使用时,就是没有其他符号参与运算,这时X做自增运算,而当X++与其他运算符一起参与运算时,这时的X++因为运算优先级低,所以是最后一个参与运算的,所以看下面代码 ; x=x++;// ...

  3. SQL 时间格式化函数

    1 取值后格式化 {0:d}小型:如2005-5-6 {0:D}大型:如2005年5月6日 {0:f}完整型 2 当前时间获取 DateTime.Now.ToShortDateString 3 取值中 ...

  4. 常用WebService收集

    尊重原著作:本文转载自http://www.cnblogs.com/tianguook/archive/2010/09/29/1838469.html 天气预报Web服务,数据来源于中国气象局Endp ...

  5. DOM的认识以及一些节点的应用

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...

  6. mongoengine连接错误：“False is not a read preference”解决方法

    问题出现: Mongoengine是一个可以操作MongoDB数据库的对象-文档映射器(Object-Document Mapper).出于工作需要,最近在使用MongoDB+Django实现一个数据 ...

  7. Hibernate摘记

    原理: 1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件2.由hibernate.cfg.xml中的<mapping reso ...

  8. gridview外边距

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区. 您需要 登录 才可以下载或查看,没有帐号?注册  x 本帖最后由 同舟 于 2013-9-30 11:44 编辑 最新项目需要个单行显示功能键 ...

  9. Mac OS X 快捷键（完整篇）

    不少朋友提出要求,希望有个「高质量」的列表.其实这样的资源真是太多,平果官网就有 快捷键文档(多国语言版本).于是花了20分钟,浏览了一些网站,整理了点资源放过来供大家参考. 快捷键是通过按下键盘上的 ...

  10. ASP.NET自定义控件加载资源WebResource问题

    最近项目用日期控件,想把My97的资源文件跟TextBox封装成一个DatePicker控件,其实很简单的意见事情,但是还是用了一天多的时间,主要的问题就是解决资源文件加载的问题.通过一天多的努力,得 ...