absolute之整体布局实现

要实现如图的布局,我最先想到是将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之整体布局实现的更多相关文章
- HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- Android studio教程:[2]项目整体布局
上篇介绍了如何创建项目,这一次将介绍创建完的项目如何呈现在开发者的眼前,介绍android studio开发环境的整体布局,让大家知道各个模块的位置和功能. 工具/原料 Android studio ...
- 表格布局扩展/DW设计界面中快速整体布局页面的操作
DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- HTML CSS + DIV实现整体布局 part1
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
- (初学)wpf仿QQ界面-整体布局
跟一个小学弟一起学习wpf,小学弟是刚初中毕业,对编程刚刚接触,我挺怕自己带的不好,影响小学弟以后在编程方向的学习兴趣.我承认自己水平不高,但是在努力去学习新知识!一起加油吧!在此以博客,记录学习进度 ...
- div整体布局分析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用Div+CSS整体布局页面的操作流程
简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head> <meta chars ...
- HTML CSS + DIV实现整体布局 part2
9.盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图: 从上往下看,层次关系如下: 第1层:盒子的边框(border), 第2层:元素的内容(content).内边 ...
- CSS整体布局
主要内容: 一.外边距margin与填充padding 二.浮动float与显示display 三.主布局 四.定位方式posotion 一.外边距margin与填充padding 1.margin设 ...
随机推荐
- 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 ...
- redis整合spring @Bean写法
jedis是一款java连接redis的客户端,spring基于jedis进行了封装,提供了简洁的操作redis的方法. 使用maven进行管理jar包之间的依赖: <dependency> ...
- 机房收费系统(VB.NET)——存储过程实战
最初接触存储过程是在耿建玲老师的视频里,当初仅仅是草草过了一遍.仅仅是有了个印象.知道了这个名词:大二时也有SqlServer数据库这门课,只是老师没讲,自己也没看:真正对存储过程的了解来自于自学考试 ...
- ubuntu14.04源代码安装postgresql 9.1
项目须要使用gisgraphy,怎奈gisgraphy3.0仅仅支持postgis1.5.因此仅仅能安装老版本号的posgresql和postgis了.从postgis的support matrix图 ...
- [React] React Fundamentals: Owner Ownee Relationship
The owner-ownee relationship is used to designate a parent-child relationship with React components ...
- Hdu 2473(并查集删除操作) Junk-Mail Filter
有木有非常吊 加强 加强版 啊 ,看了都不敢做了 .后来先做了食物链这个我还是看过的.但还是A不掉,没明确神魔意思 .总而言之.大牛的博客是个好东西.我就那么看了一下,还是不懂怎莫办啊,哎, ...
- nginx-systemtap-toolkit
https://github.com/openresty/nginx-systemtap-toolkit
- 【转】C++里定义全局变量和函数常用方法
http://blog.csdn.net/niying/article/details/637084 1:在头文件是声明变量,然后在使用的文件中用exten标识. ".h": in ...
- 采用jsp用表格的形式显示
<%@page import="cn.hncu.domain.*"%><%@ page language="java" import=&quo ...
- 混合文件系统(ramdisk+jffs)
背景知识: 一.Ramdisk文件系统: 1.掉电丢失 2.读写速度高 3.数据存储到内存 二.jffs文件系统 1.掉电不丢失 2.可存储于NOR NAND,但是适用于NOR 3.数据存储于flas ...