要实现如图的布局,我最先想到是将header与footer绝对定位,但是发现在移动端会出现bug,经查资料发现用absolute实现整体布局非常好,还挺简单的。

.header, .footer, .content {
position: absolute;
left:;
right:;
}
.header {
height: 48px;
top:;
z-index:;
/*other style*/
}
.footer {
height: 52px;
bottom:;
z-index:;
/*other style*/
}
.content {
top: 48px;
bottom: 53px;
overflow: auto;
/*other style*/
}

absolute之整体布局实现的更多相关文章

  1. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  2. Android studio教程:[2]项目整体布局

    上篇介绍了如何创建项目,这一次将介绍创建完的项目如何呈现在开发者的眼前,介绍android studio开发环境的整体布局,让大家知道各个模块的位置和功能. 工具/原料 Android studio ...

  3. 表格布局扩展/DW设计界面中快速整体布局页面的操作

    DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. (初学)wpf仿QQ界面-整体布局

    跟一个小学弟一起学习wpf,小学弟是刚初中毕业,对编程刚刚接触,我挺怕自己带的不好,影响小学弟以后在编程方向的学习兴趣.我承认自己水平不高,但是在努力去学习新知识!一起加油吧!在此以博客,记录学习进度 ...

  6. div整体布局分析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 利用Div+CSS整体布局页面的操作流程

    简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head>  <meta chars ...

  8. HTML CSS + DIV实现整体布局 part2

    9.盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图:     从上往下看,层次关系如下: 第1层:盒子的边框(border),     第2层:元素的内容(content).内边 ...

  9. CSS整体布局

    主要内容: 一.外边距margin与填充padding 二.浮动float与显示display 三.主布局 四.定位方式posotion 一.外边距margin与填充padding 1.margin设 ...

随机推荐

  1. Modelsim初级使用教程

    来源 http://blog.sina.com.cn/s/blog_6c7b6f030101ctlh.html 一. Modelsim简介 Modelsim仿真工具是Model公司开发的.它支持Ver ...

  2. 传值(VIP)

    页面间传值主要分为:1.属性传值.2.协议传值.3.单例传值.4.Block传值:   界面之间的传值:   1.从前往后:属性传值 2.从后往前:代理传值   3.多界面之间的传值 — 单例传值   ...

  3. Xcode6中使用initWithTitle:title image:image selectedImage:自定义图片

    使用xcode6来运行项目,发现使用原生的tabbar上的图片不显示了. 这个问题是因为xcode6中的一些api方法被废弃了,同时tabbar上图片的渲染方式发生了改变. 先看xcode6中的tab ...

  4. xml配置和基于java类的bean配置搭配使用

    如果同时使用了xml配置,和java类的bean配置(当然估计项目中一般不会这样), 在初始化容器指定资源文件的时候可能会比较麻烦 此时我们可以把基于java类的bean配置整合到xml中,或xml的 ...

  5. Java NIO与IO的差别和比較

    导读 J2SE1.4以上版本号中公布了全新的I/O类库.本文将通过一些实例来简介NIO库提供的一些新特性:非堵塞I/O,字符转换,缓冲以及通道. 一. 介绍NIO NIO包(java.nio.*)引入 ...

  6. 移动终端学习一:css3 Media Queries简介

    移动终端学习之一 css3 Media Queries简介 1.简介 别人写过的我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-querie ...

  7. socket.io中emit和on的用法【转】

    socket.emit('action');表示发送了一个action命令,命令是字符串的,在另一端接收时,可以这么写: socket.on('action',function(){...});soc ...

  8. .net+easyui系列--Pagination 分页

    使用 JS 创建分页 <div id="pat" style="background:#efefef;border:1px solid #ccc;"> ...

  9. i++与++i的区别

    i++与++i的意思都是i自身加1,不过这个两个语句却有很大的区别. ++i,就是直接在i上再加1,这个无需多解释. i++会稍微特殊些,他会在下次执行语句,再遇到i时,才会在i身上加1. 打个比方, ...

  10. sdk 提示至少需要Build-tools 19.1.0以上的解决方式

    网上搜了很多办法,例如修改host文件或者设置sdk manager tool 为force方式都解决不了,最简单的方式是手动下载build-tools下的包,例如直接百度搜索build-tools ...