<!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. jquery 工作空间注册

    在一些面向对象的语言中有命名空间的概念,好处就是把不同的类放在不同的文件夹下面,这样就不会发生命名冲突,当然命名空间还有其他的作用. 在这里我们讨论的是在JS中怎么使用命名空间.当然JS并没有提供原生 ...

  2. 在PyQt4中使用matplotlib

    matplotlib作为Python中著名的数据可视化工具,其官网也提供了在PyQt4中使用的源码,这里举一个应用实例,以备不时之需. 1) 利用Qt Designer创建GUI界面 Demo的GUI ...

  3. python getpass模块：隐藏不显示输入的密码

    不知道为什么,本机测试必须要在debug模式下才正常运行.. import getpass #用于隐藏用户输入的字符串,常用来接收密码 def checkuser(user,passwd): ': r ...

  4. Egret 事件机制

    主要流程: private createGameScene():void { var JimGreen = new Boy(); var HanMeimei = new Girl(); JimGree ...

  5. xilinx FPGA普通IO作PLL时钟输入

    本帖转自于 :http://www.cnblogs.com/jamesnt/p/3535073.html 在xilinx ZC7020的片子上做的实验; [结论] 普通IO不能直接作PLL的时钟输入, ...

  6. 【Maven实战】仓库介绍和Nexus的安装

    在Maven中我们之前进行配置一个项目的依赖时,引用一下jar包,这些jar包第一次都会从一个地方进行下载,这个地方称为仓库,而对于仓库一般有本地仓库和中心仓库之分,但是我们一般在做项目时会在自己的服 ...

  7. 桌面小部件----LED电子时钟实现

    桌面控件是通过 Broadcast 的形式来进行控制的,因此每个桌面控件都对应于一个BroadcastReceiver.为了简化桌面控件的开发,Android 系统提供了一个 AppWidgetPro ...

  8. keil优化论

    谈到优化,其实很多人都哭笑不得,因为在一个C51软件工程师的生涯中,总要被KEIL的优化耍那么一次到几次.我被耍过,想必看着文章的你也被耍过,如果你回答说不,那只能说你写的C51程序不多! 看看KEI ...

  9. hibernate和struts2实现分页功能

    1.DAO层接口的设计,定义一个PersonDAO接口,里面声明了两个方法: public interface PersonDAO { public List<Person> queryB ...

  10. 【HDOJ】1423 Greatest Common Increasing Subsequence

    LCIS /* 1423 */ #include <cstdio> #include <cstring> #include <cstdlib> #define MA ...