<!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. underscorejs-some学习

    2.11 some 2.11.1 语法: _.some(list, predicate, [context]) 2.11.2 说明: 对list集合的每个成员根据predicate进行真值检测,如果一 ...

  2. 如何完全禁用或卸载Windows 10中的OneDrive - 51CTO.COM

    OneDrive 是微软的个人云存储平台,提供了对个人用户的文件托管.存储和同步等服务,OneDrive 默认被内置在 Windows 10 操作系统当中,而且当用户使用 微软账户 登录时,OneDr ...

  3. TCP回射服务器程序：main函数

    TCP回射并发服务器 1.创建套接字,绑定服务器的众所周知端口 创建一个TCP套接字,在待绑定到该TCP套接字的网际网套接字地址结构中填入通配地址(INADDR_ANY) 和服务器的众所知周(SERV ...

  4. 点击Textbox 给日历控件赋值

    1.前台代码: <asp:TextBox ID="TextBox1" runat="server" onfocus="return show() ...

  5. JSP EL表达式的运用

    EL表达式的基本使用 1访问bean属性 第一种方式${user.name} 容器一次从pageContext,request,session,application中查找(实际上是调用request ...

  6. 转：开源项目学习方法ABC

    文章来自于 http://yizhaolingyan.net/?p=123#comment-207 学习各种开源项目,已经成为很多朋友不可回避的工作内容了.笔者本人也是如此.在接触并学习了若干个开源项 ...

  7. redis-cli批量删除时的坑

    redis-cli keys "*"|xargs redis-cli del tips: keys后面的*号,必须要加双引号,不然删不掉 # redis-cli keys *|xa ...

  8. COJ 0538 购物问题

    购物问题 难度级别:C: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 由于换季,ACM商场推出优惠活动,以超低价格出售若干种商品.但是,商场 ...

  9. CentOS环境下，gdb调试中出现：Missing separate debuginfos, use: debuginfo-install.....的问题

    在gdb调试时segmentation fault问题时,遇到下面的了问题: Program received signal SIGABRT, Aborted.0x00007ffff73eb925 i ...

  10. [Java] 实例创建的步骤

    创建类的一个实例时,按照下面步骤进行创建: 1. 给当前类及其父.祖类的所有成员字段分配空间,并给它们赋予默认值 2. 开始执行当前类的构造器 3. 如果当前类有父类,则对父类创建一个实例:从第 2 ...