<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    html,body {

        height: 100%;

        padding: 0;

        margin: 0;

        text-align: center;

    }

    #container {

        min-height: 100%;

        position: relative;

    }

    .header {

        line-height: 80px;

        font-size: 60px;

        height: 80px;

        background-color: #eee;

    }

    .body {

        font-size: 40px;

        padding-bottom: 80px;

    }

    .footer{

        line-height: 80px;

        height: 80px;

        width: 100%;

        font-size: 60px;

        position: absolute;

        background-color: #eee;

        bottom: 0;

    }

    </style>

</head>

<body>

    <div id="container">

        <div class="header">header</div>

        <div class="body">

        body<br>body<br>body<br>body<br>body<br>

        </div>

        <div class="footer">footer</div>

    </div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    html,body {

        height: 100%;

        padding: 0;

        margin: 0;

        text-align: center;

    }

    .header {

        line-height: 80px;

        font-size: 60px;

        height: 80px;

        background-color: #eee;

        position: fixed;

        left:0;

        right:0;

    }

    .body {

        font-size: 40px;

        padding-bottom: 80px;

        min-height: 100%;

        box-sizing: border-box;

        padding-top:80px;

        margin-bottom: -80px;

    }

    .footer{

        line-height: 80px;

        height: 80px;

        width: 100%;

        font-size: 60px;

        background-color: #eee;

    }

    </style>

</head>

<body>

    <div class="header">header</div>

    <div class="body">

    body<br>body<br>body<br>body<br>body<br>

    </div>

    <div class="footer">footer</div>

</body>

</html>

让页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部的方法的更多相关文章

  1. Jquery EasyUI的datagrid页脚footer使用及数据统计

    最近做一个统计类的项目中遇到datagrid数据显示页脚footer合计的问题,对于构造统计结果数据格式,是在程序端构造一个{"rows":[],"total" ...

  2. 网页布局中页面内容不足一屏时页脚footer固定底部

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

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

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

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

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

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

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

  6. GridView Footer页脚统计实现多行

    在使用GridView时有时会需要多行显示页脚Footer的统计,下面是一种解决方法,仅仅供各位参考 在GridView的RowCreated事件中添加多行页脚,实例代码如下: protected v ...

  7. openxml(二) 添加页眉，页脚

    openxml 中 word 文档的结构是如下图: 其中,页眉是 header,属于headerpart 部件,页脚是footer,属于footerpart 部件,图上还有其他的东西,之后会一一介绍. ...

  8. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

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

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

随机推荐

  1. java判断网络连接是否正常

    /** * 判断本机当前的网络状态是否联通 * 在这里主要用到中国天气信息,所以访问百度地址是否能够访问成功来判断当前的网络状态 */ public static boolean isConnect( ...

  2. CSU 1337（费马大定理）

      CSU 1337 Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%lld & %llu   Descrip ...

  3. SQL主、外键，子查询

    主键 数据库主键是指表中一个列或列的组合,其值能唯一地标识表中的每一行.这样的一列或多列称为表的主键,通过它可强制表的实体完整性.当创建或更改表时可通过定义 PRIMARY KEY约束来创建主键.一个 ...

  4. mongodb 教程三

    mongodb 实际上是保存json的数据的结构.当查询 是修改时 key 是可以用''保存. mongodb  插入语句 db.weixin.insert({name:'zhangfeng',age ...

  5. Qt 中如何捕获窗口停用和激活的消息

    最近一直在用Qt做一个简单的俄罗斯方块的游戏,由于要实现一个暂停游戏的功能,就是当鼠标移出正在运行的游戏,点击电脑桌面上的其他位置时,这个时候游戏暂停.在这里把实现过程简单的记录一下,作为一个学习笔记 ...

  6. 有两个数a,b,请写一个函数交换a,b

    题目:有两个数a,b,请写一个函数交换a,b,具体实现如下: #include<stdlib.h> #include<stdio.h> int swap(int * pA, i ...

  7. 输入一个单向链表，输出该链表中倒数第K个结点

    输入一个单向链表,输出该链表中倒数第K个结点,具体实现如下: #include <iostream> using namespace std; struct LinkNode { publ ...

  8. 【转】android 4.3 BLE onCharacteristicWrite没有回调

    原文网址:http://bbs.csdn.net/topics/390882717?page=1 问题1.我在自己程序有开一个Timer定时去readCharacteristic, 每次read可以成 ...

  9. 【翻译】Organizing ASP.NET MVC solutions 如何组织你的ASP.NET MVC解决方案

    序言 时隔一年,弦哥重出江湖,对于我们学习.NET MVC那将有大大的好处,期待弦哥的重构系列.在弦哥与jerrychou的交流中提到了一篇文章http://lostechies.com/jimmyb ...

  10. Java习惯用法总结

    在微博中看到的一个不错的帖子,总结的很详细,拷贝过来,一是为了方便自己查阅,也能和大家一起共享,后面有原文的链接地址: 在Java编程中,有些知识 并不能仅通过语言规范或者标准API文档就能学到的.在 ...