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. hbase java 基本例子

    一下代码实用  0.99.0 以后的版本. package hadoop; import java.io.IOException; import java.util.ArrayList; import ...

  2. KNN手写实践：Python基于数据集整体计算以及排序

    1. 距离计算,不要通过遍历每个样本来计算和指定样本距离,而是通过对于指定样本进行广播(复制)成为一个shape和全局一致后,再进行整体计算,这里的广播 / 复制采用的是tile函数来实现的: 2. ...

  3. Ionic 发布可重用代码到NPM上

    1.首先下载可重用模板 https://github.com/ionic-team/ionic-module-template 2. 将模板改包名后发布到NPM上 如果你没有NPM账号,先进行注册. ...

  4. Go RPC返回值

    Go 语言RPC定义格式如下: func (t T) MethodName(argType T1, replyType T2) error 第一个参数是接收的参数,第二个参数是返回给客户端的参数,第二 ...

  5. HanLP用户自定义词典源码分析详解

    1. 官方文档及参考链接 l 关于词典问题Issue,首先参考:FAQ l 自定义词典其实是基于规则的分词,它的用法参考这个issue l 如果有些数量词.字母词需要分词,可参考:P2P和C2C这种词 ...

  6. Git-git rebase详解

    git合并代码方式主要有两种方式,分别为:1.merge处理,这是大家比较能理解的方式.2.rebase处理,中文此处翻译为衍合过程. git rebase操作讲解例子: cd /usr/local/ ...

  7. windows环境下把Python代码打包成独立执行的exe

    windows环境下把Python代码打包成独立执行的exe可执行文件   有时候因为出差,突然急需处理一批数据.虽然写好的脚本存储在云端随用随取,然而编译的环境还需要重新搭建,模块也需要重新装载,从 ...

  8. php函数总结2

    1.匿名参数 func_get_args //获取参数列表的数组 func_get_arg(num) //数组索引 func_num_args() //获取匿名函数的个数 <?php funct ...

  9. 配置 influxDB 鉴权及 HTTP API 写数据的方法

    本文简要描述如何为 InfluxDB 开启鉴权和配置用户管理权限(安装后默认不需要登录),以及开启鉴权后如何使用 HTTP API 写数据. 创建 InfluxDB 管理员账号创建 admin 帐号密 ...

  10. InfluxDB v1.6.4 下载

    InfluxDB v1.6.4 OS X (via Homebrew) brew update brew install influxdb Docker Image docker pull influ ...