<!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. Thinkphp 文本编辑器

    文本编辑器:可以从网上下载---ueditor文件夹里面包含php和utf8-php两个文件夹 平时使用时主要用到获取内容和写入内容两个按钮 获取内容: <!DOCTYPE html PUBLI ...

  2. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

  3. js 联系电话验证实现

         var str=$('#tele').val();                                       var regPartton=/1[3-8]+\d{9}/;  ...

  4. CAFFE安装 CentOS无GPU

    前记 由于是在一台用了很久的机器上安装caffe,过程比较复杂,网上说再干净的机器上装比较简单.如果能有干净的机器,就不用再过这么多坑了,希望大家好运!介绍这里就不说了,直接进入正题: Caffe 主 ...

  5. [Struts2学习笔记] -- 简单的类型转换

    接下来学习一下Struts2简单的类型转换,Struts2基于ognl.jar实现了简单类型的数据转换.比如jsp页面中的form值与字段值的转换,下面写一个例子. 1.创建一个jsp页面,编写一个f ...

  6. css（）和 attr（）的区别

  7. Unity3d在安卓android的更新(APK覆盖)

    其实这并没什么技术难点,也不是完美的热更新方案,只能说是退而求其次的一个方法. 起因主要是因为公司几个U3D项目在立项之初都没有能做好热更新的规化,导致现在要去做U3D的热更新非常难,并且项目已处于中 ...

  8. 转:使用XHProf优化PHP程序

    原文来自于:http://blog.sina.com.cn/s/blog_665fc8980100l8dq.html XHProf 是 FaceBook 开发的一个函数级别的 PHP 分层分析器. 数 ...

  9. 转：Google论文之三----MapReduce

    文章来自于:http://www.cnblogs.com/geekma/p/3139823.html MapReduce:大型集群上的简单数据处理 摘要 MapReduce是一个设计模型,也是一个处理 ...

  10. 转：Stimulsoft Reports.Fx 2013.3新增 Email、AutoPageScale支持以及图表组件Funnel Weighted Slices

    原文来自于:http://www.infoq.com/cn/news/2014/01/stimulsoft-reports-fx-2013-3 Stimulsoft发布Reprots.Fx 2013. ...