1 <!DOCTYPE html>

  2 <html>

  3 <head>

  4     <title>page01</title>

  5     <style type="text/css">

  6         .container{position:relative;width:100%;min-height:100%;}

  7         .header{padding-bottom:10%;width:100%;position: fixed;background-color:blue;top:0px;left:0px;}

  8         .main{position: fixed;width: 100%;height: 80%;background-color: green;top:10%;left:0px;}

  9         .footer{height:10%;width:100%;position:fixed;bottom:0px;left:0px;background-color: yellow;}

 10     </style>

 11 </head>

 12 <body>

 13

 14 <div class="container">

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

 16 <div class="main">main</div>

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

 18 </div>

 19 </body>

 20 </html>

效果图如下：（header固定在顶部，footer固定在底部）

html中header,footer分别固定在顶部和底部的更多相关文章

  1. bootstrap让footer固定在顶部和底部

    一.原理 使用fixed进行固定定位,相对于浏览器窗口进行定位,然后再设置其z-index的值即可. 二.Bootstrap中使用的类 1.顶部固定:navbar-fixed-top 2.底部固定:n ...

  2. [Android Bug] ListView中Header, Footer无法隐藏(gone)的问题

    ListView中Header.Footer View应该是会应该遇到, 比如说,滚动到底部时,自动开始加载: 对于一些应用市场,会在Header中加上ViewFlipper做应用推荐(滚动的那种,好 ...

  3. 让页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  5. ListView中动态显示和隐藏Header&Footer

    ListView的模板写法 ListView模板写法的完整代码: android代码优化----ListView中自定义adapter的封装(ListView的模板写法) 以后每写一个ListView ...

  6. 【我的Android进阶之旅】如何去除ListView中Header View、Footer View中的分割线

    最近的项目中给ListView 加入了一个Header View之后,发现Header View的下方也有了分割线,很难看,UI要求将Header View的分割器去掉,好吧.现在就来说一说如何如何去 ...

  7. 利用gulp解决前后端分离的header/footer引入问题

    在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...

  8. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  9. css 中 stick footer 布局实现

    做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...

随机推荐

  1. C语言struct小知识

    1.C语言里的struct是不能包含成员函数的,只能有数据成员2.C语言struct定义变量只能用一下两种方式:struct { ... } x, y, z;struct point pt;直接poi ...

  2. Python时钟，计算程序运行时间

    关于计算程序执行时间 import time def sleep(): time.sleep(2.5) def forloop(count): for i in range(count): print ...

  3. ubuntu网络配置及端口名修改

    一.网络配置文件 buntu系统进行网络配置有的时候用图形界面不起作用,这种情况下可以直接修改某些启动脚本或配置文件 Ubuntu系统进行网络配置涉及到几个配置文件1./etc/network/int ...

  4. Zookeeper Ha集群简介+jdbcClient访问Ha集群环境

    Hadoop-HA机制HA概述high available(高可用) 所谓HA(high available),即高可用(7*24小时不中断服务). 实现高可用最关键的策略是消除单点故障.HA严格来说 ...

  5. 阅读OReilly.Web.Scraping.with.Python.2015.6笔记---找出网页中所有的href

    阅读OReilly.Web.Scraping.with.Python.2015.6笔记---找出网页中所有的href 1.查找以<a>开头的所有文本,然后判断href是否在<a> ...

  6. 关于高并发下kafka producer send异步发送耗时问题的分析

    最近开发网关服务的过程当中,需要用到kafka转发消息与保存日志,在进行压测的过程中由于是多线程并发操作kafka producer 进行异步send,发现send耗时有时会达到几十毫秒的阻塞,很大程 ...

  7. delphi中Time消息的使用方法

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  8. Laravel 输出最后一条sql

    $queries = DB::getQueryLog(); $last_query = end($queries); print_r( $last_query);

  9. 黄聪：Android酷炫实用的开源框架（UI框架）（转）

    Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...

  10. 【Graphite】Graphite常用函数使用

    使用Graphite进行sort排名 限制返回条数 aliasByNode(limit(sortByMaxima(summarize(EPIC.bm.00*.memory.memory.buffere ...