在制作页面有这样一种现象：当一个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. EXT属性

    Extjs & Ext.Net 弹出整个浏览器对话框的方法 top.Ext.Msg.alert("值"); top.Ext.Msg.confirm("值" ...

  2. WebStorm11 注册码

    这个注册方法我也是在贴吧上看到的:http://tieba.baidu.com/p/4160766032 注册方法 注册时选择“License server”输入“http://15.idea.lan ...

  3. CRC循环校验码

    为了防止数据在传输的时候丢失或被篡改,有了各种校验码. 每种CRC校验都有自己的多项式.每个多项式都有唯一对应的二进制. CRC16就如果名字一样,校验码就是16位的 如果CRC32就是32位的. 原 ...

  4. HTML3层叠样式表

    层叠样式表:CSS Cascading Style Sheet.V2.1  控制页面样式外观.   一.样式表分三类: 1.内联样式表.--放在元素的开始标记中.--只对当前元素起作用. <in ...

  5. zoj1136 Multiple

    记忆化搜索,因为要求最小的,肯定是从小到大,依次添加,那么通过bfs,队列貌似是最好的选择.因为很可能那个数爆long long,所以采用字符串存储,并记录余数,通过模拟除法的方式来写. 剪枝:因为后 ...

  6. Android Fragment真正意义上的onResume和onPause

    Fragment虽然有onResume和onPause的,但是这两个方法是Activity的方法,调用时机也是与Activity相同,和ViewPager搭配使用这个方法就很鸡肋了,根本不是你想要的效 ...

  7. leetcode算法刷题(三)

    今天在刷了几道简单的动态规划后,又看了看string方面的题 第五题 Longest Palindromic Substring 题目的意思:求一个字符串的最长回文子串 分析:开始,我的想法是,现在字 ...

  8. linux c语言连接mysql

    ubuntu下使用apt-get安装mysql: sudo apt-get install mysql-server sudo apt-get install mysql-client sudo ap ...

  9. PNPOLY - Point Inclusion in Polygon W. Randolph Franklin

    测试目标点是否在多边形内int pnpoly(int nvert, float *vertx, float *verty, float testx, float testy) { int i, j, ...

  10. Oracle EBS-SQL (INV-4):检查负库存记录数.sql

    DEFINE DATE1="01/15/20** 23:59:59"      /*输入指定日期*/DEFINE CODE="%"                ...