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设 ...
随机推荐
- JavaScript- The Good Parts Chapter 6
Thee(你) I’ll chase(追逐:追捕) hence(因此:今后), thou(你:尔,汝) wolf in sheep’s array.—William Shakespeare, The ...
- iOS开发中懒加载的使用和限制
1.在开发过程中很多时候,很多控件和对象需要alloc为了,提高开发效率使得懒加载得以产生. 2.下边用代码解释: - (NSMutableArray *)newsArr{ if (!_newsArr ...
- [置顶] 深入浅出Spring(一)Spring概述
现在很多的企业级项目中基本上都会用到了Spring框架,那么为什么会出现Spring,Spring是什么?这次的博文我主要为大家简单介绍一下Spring. Java EE优缺点 我们都知道在2003年 ...
- node.js在windows下的学习笔记(2)---简单熟悉一些命令
1.打开如下的安装 2.输入node -v,显示node的版本号 3.输入node --help.显示帮助命令 4.在命令行中输入node,按下回车键,当出现>符号的时候即进入了node的REP ...
- Android SDK Manager无法更新问题解决
有时候在网络不好的情况下,android sdk manager更新可能一直报错.原因跟国内对于google相关服务的访问受限有关系,需要设置代理访问. 最近也遇到了这个问题.解决方法如下. 启动An ...
- 多线程读写共享变量时,synchronized与volatile的作用
在<effective java>中看的的知识点,在工作中确实遇到了~ keywordsynchronized能够保证在同一时刻,仅仅有一个线程能够运行某一个方法,或者某一个代码块. 同步 ...
- [翻译]Python with 语句
With语句是什么? Python's with statement provides a very convenient way of dealing with the situation wher ...
- bit,byte,char,string区别与基本类型认识
bit.byte.位.字节.汉字的关系 1 bit = 1 二进制数据 1 byte = 8 bit 1 字母 = 1 byte = 8 bit ...
- su: cannot set user id: Resource temporarily unavailable
今天R&D所在主机出现su: cannot set user id: Resource temporarily unavailable资源不可用报错,直接通过其他机器ssh huyuh@xxx ...
- Clean Code 笔记 (一):命名
一.命名规范1.名副其实,通过名称我们知道它为什么存在,它做什么事,该怎么用2.避免误导,避免使用与本意相悖的词,提防使用不同之处较小的名称3.有意义的区分,去掉多余的废话比如:a,the.缺少明确约 ...