<!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. Extjs嵌入html

    方式一:使用组件的html属性嵌入html代码,如果html代码中存在参数可以使用字符串拼接的方式拼接html代码. html页面: <!doctype html> <html> ...

  2. Yii2的相关学习记录，下载Yii2（一）

    原先学习过Yii1的相关知识,虽然也是半懂不懂的,但稍微的结构是了解的.现在利用晚上的时间学习下Yii2的使用,打算建一个后台管理系统,这里记录下,以免自己以后忘记. 目前已看一部分Yii2的权威指南 ...

  3. Uncaught SyntaxError: Unexpected end of input

    js报错  原因:输入的意外终止…… 页面代码写的不规范啊……其中的某条语句,没有正常结束…… 或者部分语句“‘’”双引号,单引号没有配对好,被转义了之类的……错误造成的 代码: <script ...

  4. Python hashlib模块 （主要记录md5加密）

    python提供了一个进行hash加密的模块:hashlib 下面主要记录下其中的md5加密方式(sha1加密一样把MD5换成sha1) >>> import hashlib > ...

  5. Rxjava+Retrofit2+Okhttp3多文件上传(服务器端代码+客户端代码)

    所有代码亲测可用,如有问题,欢迎指正. 首先在ApiService接口文件中新建文件上传接口 public interface ApiService { static final String BAS ...

  6. iOS开发：使用Block在两个界面之间传值（Block高级用法：Block传值）

    iOS开发:使用Block在两个界面之间传值(Block高级用法:Block传值)   使用Block的地方很多,其中传值只是其中的一小部分,下面介绍Block在两个界面之间的传值: 先说一下思想: ...

  7. libcurl 下载上传

    近来一个新的项目需要使用到http. 本来用socket来写一个的,后来发现功能实在太简单,有点捉襟见肘. 于是改用libcur来做. 首先下载libcur的源码,然后配置: ./configure ...

  8. could only be replicated to 0 nodes, instead of 1

    周末机房断电,然后hadoop爆出如题的错误,解决方案就是关闭所有节点的防火墙,相关命令如下: 查看防火墙状态: /etc/init.d/iptables status 暂时关闭防火墙: /etc/i ...

  9. Keil C51里面lib文件生成和调用方法

    一.包含关系 LCD1602.C里面包含LCD1602.H LCD1602.H的文件格式 二.设置生成lib文件 三.Lib文件调用 添加lib文件对话框 添加后的lib文件 呵呵^_^,这样就可以删 ...

  10. COJ 1003 WZJ的数据结构（三）ST表

    WZJ的数据结构(三) 难度级别:B: 运行时间限制:3000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大小为N的 ...