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. 手动增加pe节并修改oep

    一直想学学怎么动动pe文件,学习了几篇文章尤其是寒晨的文章后,自己动手也尝试了一下加节和修改oep,写出来供和我一样菜的一起进步. 一.       增加pe节需要的操作 1.    确定内存中的节的 ...

  2. Winform Chart

    Chart图表解释说明: 第一步:使用VS创建Winform项目: 第二步:工具箱中拖入Chart控件: 第三步:所有控件拖入其他控件如下图所示: using System; using System ...

  3. spring boot 热更新配置

    maven添加 spring-boot-devtools 允许自动构建 设置里面,搜索compiler,在Build,Execution,Deployment里面勾选Build project aut ...

  4. IO练习文件读取

    import java.io.*; public class CheckFile { private File f ; private BufferedReader bdr; private char ...

  5. Java第08次实验提纲(多线程)

    PTA与参考资料 题集:多线程 多线程实验参考文件 ThreadReading 实验-基础部分 基础题目MyThread类.PrintTask(讲解线程Thread与任务Runnable相分离的概念) ...

  6. ##Truncated incorrect DOUBLE value: 'E#4' 的问题解决

    给sql语句 加了个引号,问题就这么轻易解决了,猜想,应该是mysql 做where对比的时候,把数字5 与数据库里的数据”OABF” 比较,应该是这时的问题.

  7. ALGO-141_蓝桥杯_算法训练_P1102

    定义一个学生结构体类型student,包括4个字段,姓名.性别.年龄和成绩.然后在主函数中定义一个结构体数组(长度不超过1000),并输入每个元素的值, 程序使用冒泡排序法将学生按照成绩从小到大的顺序 ...

  8. 关于linux中的system函数

    Linux下使用system()函数一定要谨慎 https://blog.csdn.net/senen_wakk/article/details/51496322 system()正确应用 https ...

  9. Netty Tutorial Part 1.5: On Channel Handlers and Channel Options [z]

    Intro: After some feedback on Part 1, and being prompted by some stackoverflow questions, I want to ...

  10. 【转】探索 ConcurrentHashMap 高并发性的实现机制

    原文链接:https://www.ibm.com/developerworks/cn/java/java-lo-concurrenthashmap/  <探索 ConcurrentHashMap ...