要实现如图的布局,我最先想到是将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. windows下svn+apache搭建svn服务器

    使用软件: apache_2.0.55-win32-x86-no_ssl.msi Setup-Subversion-1.5.3.msi TortoiseSVN-1.5.10.16879-win32-s ...

  2. redis整合spring @Bean写法

    jedis是一款java连接redis的客户端,spring基于jedis进行了封装,提供了简洁的操作redis的方法. 使用maven进行管理jar包之间的依赖: <dependency> ...

  3. 机房收费系统(VB.NET)——存储过程实战

    最初接触存储过程是在耿建玲老师的视频里,当初仅仅是草草过了一遍.仅仅是有了个印象.知道了这个名词:大二时也有SqlServer数据库这门课,只是老师没讲,自己也没看:真正对存储过程的了解来自于自学考试 ...

  4. ubuntu14.04源代码安装postgresql 9.1

    项目须要使用gisgraphy,怎奈gisgraphy3.0仅仅支持postgis1.5.因此仅仅能安装老版本号的posgresql和postgis了.从postgis的support matrix图 ...

  5. [React] React Fundamentals: Owner Ownee Relationship

    The owner-ownee relationship is used to designate a parent-child relationship with React components ...

  6. Hdu 2473(并查集删除操作) Junk-Mail Filter

    有木有非常吊 加强 加强版   啊  ,看了都不敢做了   .后来先做了食物链这个我还是看过的.但还是A不掉,没明确神魔意思 .总而言之.大牛的博客是个好东西.我就那么看了一下,还是不懂怎莫办啊,哎, ...

  7. nginx-systemtap-toolkit

    https://github.com/openresty/nginx-systemtap-toolkit

  8. 【转】C++里定义全局变量和函数常用方法

    http://blog.csdn.net/niying/article/details/637084 1:在头文件是声明变量,然后在使用的文件中用exten标识. ".h": in ...

  9. 采用jsp用表格的形式显示

    <%@page import="cn.hncu.domain.*"%><%@ page language="java" import=&quo ...

  10. 混合文件系统(ramdisk+jffs)

    背景知识: 一.Ramdisk文件系统: 1.掉电丢失 2.读写速度高 3.数据存储到内存 二.jffs文件系统 1.掉电不丢失 2.可存储于NOR NAND,但是适用于NOR 3.数据存储于flas ...