先上代码

<!DOCTYPE HTML>

<html lang="en" style="height: 100%; width: 100%;">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=Edge">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body class="page-header-fixed page-sidebar-closed-hide-logo page-sidebar-closed-hide-logo"  style="position: absolute; width: 100%; min-height: 100%; height: auto;">

        <div class="page-header navbar navbar-fixed-top">

            //这部分的div的 position 是 fixed </div>

        <div style="position: absolute; min-height: 100%; height: auto; width: 100%; text-align: center;">

            <div class="page-container" style="position: relative; margin-bottom: 30px;"></div>

             <div class="page-footer" style="position: absolute; bottom: 0px; display: block; width: 100%;"></div>

        </div>

    </body>

</html>

解析：

1、先设置<html>的 height 为 100%；

2、设置 body 的position 为 absolute，因为它里面的 div 有一个为 fixed，这样可以使得 body 的范围可以包括该div，如果设置为 relatve，则不包括该div。再设置 min-height 为 100%，使其最小高度也为 html 的 height；

3、让内容 div 和页脚 div 都包含在同一个外部 div 中，这样页脚在窗口缩小时不会上浮到内容 div 的位置。

4、外部 div 的 position 设置为 absolute，是由于 body 也为 absolute 的缘故，并设置其 min-height 为 100%，这样可以使其高度最小为 body 的高度，height 为 auto，则使其可以任意改变。

5、页脚 div 的 position 设置为 absolute，bottom 为 0，是为了绝对定位，让其居于页面底部。

html 设置页脚div一直在页面底部的更多相关文章

  1. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

  2. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  3. Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  4. div浮动在页面底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  6. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  7. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  8. C# 操作Word页眉页脚——奇偶页/首页不同、不连续设置页码、复制页眉页脚、锁定页眉页脚、删除页眉页脚

    前言 本文是对Word页眉页脚的操作方法的进一步的阐述.在“C# 添加Word页眉页脚.页码”一文中,介绍了添加简单页眉页脚的方法,该文中的方法可满足于大多数的页眉页脚添加要求,但是对于比较复杂一点的 ...

  9. 005-CSS让页脚始终在底部不论页面内容多少

    让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一: <!DOCTYPE html> <html> <head> <meta chars ...

随机推荐

  1. 4位开锁<dfs>

    题意: 有一个四位密码的锁,每一位是1~9的密码,1跟9相连.并且相邻的连个密码位可以交换.每改变一位耗时1s,给出锁的当前状态和密码,求最少解锁时间. 思路: 用bfs枚举出所有相邻交换的情况,并记 ...

  2. sqlserver 2008 查看表描述，和表结构

    sp_help sys_user sp_columns   sys_user --表结构 THEN obj.name ELSE '' END AS 表名, col.colorder AS 序号 , c ...

  3. TriggerPrefab 拖拽物体

    模拟经营类游戏 有一个特点,就是 拖拽物体.常见的有<帝国><红警><部落战争><凯撒大帝>等等 2d 拖拽 大部分都是 用 OnDrag 方法来 拖动 ...

  4. jQuery 图片随滚动条滚动加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. const与static的区别

    const就是只读的意思,只在声明中使用;const修饰的数据类型是指常类型,常类型的变量或对象的值是不能被更新的. const的作用: (1)可以定义const常量,具有不可变性. (2)便于进行类 ...

  6. 转：Windows平台配置Appium+Java环境

    1) 安装JDK 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 安装 ...

  7. 使用nginx简单实现负载均衡

    只是简单使用nginx玩玩而已,知道能这么用,但是在实际项目中并没有实践过,在项目不大的时候用不到,但是对于理解负载均衡来说还是可以的. 利用虚拟机安装了三个centOS系统,然后顺便装了环境. 这里 ...

  8. vr & obv

    买卖信号 1.当VR曲线的运行形态一底比一底低,而OBV曲线的运行形态一底比一底高,同时股价也突破中短期均线,则表明VR指标和OBV出现了底背离走势,这是VR指标发出的短线买入信号.如图(15–1)所 ...

  9. C#入门经典第九章定义类-1

    1.C#中使用class关键字来定义类 class MyClass { //代码部分 } 定义了类之后,就可以在项目中能访问该定义的其他位置对该类进行实例化.默认情况下,类的声明是内部的,即只有当前项 ...

  10. 关于oracle 还原数据库的要领

    create tablespace DSXZFW datafile 'D:\yangk\oraclespace\DSXZFW.ora' size 1000m; // 创建表空间,注意如果要还原数据库的 ...