要实现如图的布局,我最先想到是将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. J2EE 全面简介

    原文地址:http://www.ibm.com/developerworks/cn/java/j2ee/ J2EE的概念 目前,Java 2平台有3个版本,它们是适用于小型设备和智能卡的Java 2平 ...

  2. ThinkPHP中的动态缓存(S方法)和快速缓存(F方法)(转)

    系统默认的缓存方式是采用File方式缓存,我们可以在项目配置文件里面定义其他的缓存方式,例如,修改默认的缓存方式为Xcache(当然,你的环境需要支持Xcache)    对于File方式缓存下的缓存 ...

  3. CRF++使用小结(转)

    1. 简述 近期要应用CRF模型,进行序列识别.选用了CRF++工具包,详细来说是在VS2008的C#环境下,使用CRF++的windows版本号.本文总结一下了解到的和CRF++工具包相关的信息. ...

  4. count(1) count(*)

    mysql from t; +---+ | +---+ | | | | +---+ rows in set (0.00 sec) mysql) from t; +----------+ ) | +-- ...

  5. 【转】GitHub平台最火Android开源项目整理——2013-08-25 17

    http://game.dapps.net/news/developer/9199.html GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮 ...

  6. iOS之核心动画(Core Animation)

      Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core ...

  7. oracle数据库入门

    oracle  数据库入门. 1.数据 2.数据存储的地方:变量 数组 容器 (内存中),文件,数据库(文件) 3.数据库系统:sqlserver 2000   2005  2008  mysql 5 ...

  8. (整理)FORM:Oracle EBS客制化Form的菜单栏用法说明

    用户最多可以定义45个form-level的trigger,名称必须为SPECIALn, 其中SPECIAL1 to SPECIAL15属于Tools菜单项,放在“工具”主菜单下. SPECIAL16 ...

  9. Atom编辑器入门到精通(三) 文本编辑基础

    身为编辑器,文本编辑的功能自然是放在第一位的,此节将总结常用的文本编辑的方法和技巧,掌握这些技巧以后可以极大地提高文本编辑的效率 注意此节中用到的快捷键是Mac下的,如果你用的系统是Win或者Linu ...

  10. <input> 标签

    HTML5 中的新属性.   属性 值 描述 accept mime_type 规定通过文件上传来提交的文件的类型. align left right top middle bottom 不赞成使用. ...