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. pycharm Process finished with exit code (0xC0000005)

    pycharm  Process finished with exit code  (0xC0000005)解决办法 上次报过这个错误,是在安装浏览器时发现的,报过同样的错误.按当时的方法,以为切地解 ...

  2. pyspark数据准备

    鸢尾花数据集 5.1,3.5,1.4,0.2,Iris-setosa 4.9,3.0,1.4,0.2,Iris-setosa 4.7,3.2,1.3,0.2,Iris-setosa 4.6,3.1,1 ...

  3. golang bug Unknown load command 0x32 (50)

    问题 编译文件时报错: /usr/local/go/pkg/tool/darwin_amd64/link: /usr/local/go/pkg/tool/darwin_amd64/link: comb ...

  4. SDI视频采集过程

    SDI视频采集过程 GTP收发模块为视频采集系统的核心部分,包含发送和接收,完成对信号的解串和串码.并且HD-SDI信号中并非所有的信号都是有效视频信号,这部分功能由数据分析模块实现,并将提取出来的有 ...

  5. js页面滚动时层智能浮动定位实现

    直接上代码 $.fn.smartFloat = function (className) { var position = function (element) { var top = element ...

  6. LeetCode——18. 4Sum

    一.题目链接:https://leetcode.com/problems/4sum/ 二.题目大意: 给定一个数组A和一个目标值target,要求从数组A中找出4个数来使之构成一个4元祖,使得这四个数 ...

  7. 生成器&迭代器，模块

    列表生成式 将列表data=[1,2,3]里的元素都乘2 方法一 data=[1,2,3] for index,i in enumerate(data): data[index] *=2 print( ...

  8. ubuntu安装最新的mercurial

    Mercurial 是一种轻量级分布式版本控制系统,采用 Python 语言实现,易于学习和使用,扩展性强 之前安装的mercurial版本(2.8.2)太老了,想安装最新版本的. 网上搜到方法 su ...

  9. tomcat操作

    一.启动 D:\tomcat8.5.9\bin\startup   或者  D:\tomcat8.5.9\bin\catalina start 关闭tomcat: D:\tomcat8.5.9\bin ...

  10. NIO文件锁FileLock

    目录 <linux文件锁flock> <NIO文件锁FileLock> <java程序怎么在一个电脑上只启动一次,只开一个进程> 文件锁可以是shared(共享锁) ...