要实现如图的布局,我最先想到是将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. JavaScript- The Good Parts Chapter 6

    Thee(你) I’ll chase(追逐:追捕) hence(因此:今后), thou(你:尔,汝) wolf in sheep’s array.—William Shakespeare, The ...

  2. iOS开发中懒加载的使用和限制

    1.在开发过程中很多时候,很多控件和对象需要alloc为了,提高开发效率使得懒加载得以产生. 2.下边用代码解释: - (NSMutableArray *)newsArr{ if (!_newsArr ...

  3. [置顶] 深入浅出Spring(一)Spring概述

    现在很多的企业级项目中基本上都会用到了Spring框架,那么为什么会出现Spring,Spring是什么?这次的博文我主要为大家简单介绍一下Spring. Java EE优缺点 我们都知道在2003年 ...

  4. node.js在windows下的学习笔记(2)---简单熟悉一些命令

    1.打开如下的安装 2.输入node -v,显示node的版本号 3.输入node --help.显示帮助命令 4.在命令行中输入node,按下回车键,当出现>符号的时候即进入了node的REP ...

  5. Android SDK Manager无法更新问题解决

    有时候在网络不好的情况下,android sdk manager更新可能一直报错.原因跟国内对于google相关服务的访问受限有关系,需要设置代理访问. 最近也遇到了这个问题.解决方法如下. 启动An ...

  6. 多线程读写共享变量时,synchronized与volatile的作用

    在<effective java>中看的的知识点,在工作中确实遇到了~ keywordsynchronized能够保证在同一时刻,仅仅有一个线程能够运行某一个方法,或者某一个代码块. 同步 ...

  7. [翻译]Python with 语句

    With语句是什么? Python's with statement provides a very convenient way of dealing with the situation wher ...

  8. bit,byte,char,string区别与基本类型认识

    bit.byte.位.字节.汉字的关系 1 bit     = 1  二进制数据        1 byte  = 8  bit        1 字母 = 1  byte = 8 bit       ...

  9. su: cannot set user id: Resource temporarily unavailable

    今天R&D所在主机出现su: cannot set user id: Resource temporarily unavailable资源不可用报错,直接通过其他机器ssh huyuh@xxx ...

  10. Clean Code 笔记 (一):命名

    一.命名规范1.名副其实,通过名称我们知道它为什么存在,它做什么事,该怎么用2.避免误导,避免使用与本意相悖的词,提防使用不同之处较小的名称3.有意义的区分,去掉多余的废话比如:a,the.缺少明确约 ...