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. beanshell获取响应结果数据

    http://blog.csdn.net/lluozh2015/article/details/72834014 [Jmeter]BeanShell断言--数据处理 标签: jmeter 2017-0 ...

  2. Jmeter使用流程及简单分析监控

    本文摘自:一颗糖果   https://www.cnblogs.com/linglingyuese/archive/2013/03/04/linglingyuese-one.html 1.下载Jmet ...

  3. golang database sql DSN (Data Source Name)中的timeout, readTimeout

    golang 语言,在打开mysql DB时,有时会用到timeout,readTimeout两个参数. 1.timeout 建立连接超时时间 例如, "30s", "0 ...

  4. oracle删除表垃圾

    1,完全删除表: drop table 表名 purge; 2,删除表后永久删除-回收站表 purge table 表名: 3,清空垃圾回收站 purge recyclebin; 4, 查询所有此类表 ...

  5. [转]跳板机Jumpserve的生产环境配置

    6.跳板机Jumpserver]   Jumpserver是国内一款开源的轻便的跳板机系统,他们的官网:http://www.jumpserver.org/ 使用这款软件意在提高公司内部登录生产环境服 ...

  6. Set ARITHABORT Option设置为ON

    MSDN注释中提到,应该总是将Set ARITHABORT Option设置为ON,原因有四: 1,如果SSMS和application client的设置不同,那么会导致application cl ...

  7. Tribon/AM 数据库名字的含义

    收集在这里备用 数据库名 Tribon环境变量 内容描述 船体型线数据库 SB_CGDB 船体外型信息 型表面,船体曲线,板缝 船体结构数据库 SB_OGDB 船体模型信息 板材数据库 SB_PLDB ...

  8. 同台同时多开DELPHI2007的解决办法

    Cannot create file "C:\Users\Administrator\AppData\Local\Temp\EditorLineEnds.ttr"这个问题的产生根据 ...

  9. LeetCode——7. Reverse Integer

    一.题目链接:https://leetcode.com/problems/reverse-integer/ 二.题目大意: 给定一个整数,要求反转该整数之后再返回:如果归返回的整数超过了int型整数的 ...

  10. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...