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. java 连接 hiveserver2 例子

    启动了  hiveserver2 以后才能使用 程序连接 .目前的 使用的 是  server2 版本.和以前的版本驱动包名不同: package hadoop; import java.sql.Co ...

  2. 商品和订单中使用MQ

    一.将Product服务增加到配置中心 1.添加引用 <dependency> <groupId>org.springframework.cloud</groupId&g ...

  3. 基于spring的placeholder思路处理配置信息敏感信息加密解密的实践

    基于Spring的placeholder处理思路,实现系统配置信息敏感信息的加密解密处理. 我们的处理方案,是基于类org.springframework.beans.factory.config.P ...

  4. php Pthread 多线程基本介绍

    我们可以通过安装Pthread扩展来让PHP支持多线程.   线程,有时称为轻量级进程,是程序执行的最小单元.线程是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,它与同属 ...

  5. 关于sdk>=23的android版本权限的问题

    在SDK23也就是Android6.0.1里编写调用系统通讯录读写权限的程序,在AndroidManifest.xml中,已经配置了 <uses-permission android:name= ...

  6. workerman vmstat服务器状态监控服务

    转载出自 :http://www.workerman.net/workerman-vmstat workerman vmstat服务器状态监控服务 vmstat 命令可以展现服务器的CPU使用率,内存 ...

  7. 2017上海C++面试

    今天参加了一次面试,觉得比较有意思,收获蛮多,简单的在这里总结下. 开始做了一道算法题,也就是算术运算表达式中的左括号和右括号的匹配,用c++写.我大概10分钟就写完了.其实以前一直想实现这个功能的, ...

  8. ALGO-120_蓝桥杯_算法训练_学做菜

    问题描述 涛涛立志要做新好青年,他最近在学做菜.由于技术还很生疏,他只会用鸡蛋,西红柿,鸡丁,辣酱这四种原料来做菜,我们给这四种原料标上字母A,B,C,D. 涛涛现在会做的菜有五种: . 西红柿炒鸡蛋 ...

  9. Ubuntu 14.10 下Hadoop FTP文件上传配置

    最近老板提出一个需求,要用Hadoop机群管理生物数据,并且生物数据很多动辄几十G,几百G,所以需要将这些数据传到HDFS中,在此之前搭建了HUE用来图形化截面管理HDFS数据,但是有个问题,上面使用 ...

  10. C#多线程更新，查询MongoDB数据

    对多线程一直在用,但是从来没去深入研究过注意的事项,包括和锁的配合也是一知半解没有真正理解锁(lock)的用法. 这次在做数据分析是需要将访问的url中host部分记录,如果已经存在就直接匹配id,没 ...