要实现如图的布局,我最先想到是将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. ASP.NET MVC- Model- An Introduction to Entity Framework for Absolute Beginners

    Introduction This article introduces Entity Framework to absolute beginners. The article is meant fo ...

  2. 字符串匹配算法之Rabin-Karp算法

    关键思想在于把输入的字符既看作图形符号,又看做数字,预处理算出模式P的d进制的值p,时间复杂度为Θ(m),让后针对n - m + 1个有效偏移s计算出相应的ts,这里是由于利用ts来计算ts+1,时间 ...

  3. CALayer 的 position和anchorPoint属性

    在iOS 中,UIButton.UIImage等UIView 之所以能够显示在屏幕上,是因为其内部有一个图层(CALayer).通过UIView的layer 属性可以访问这个图层: @property ...

  4. ConversionException: No value specified for 'Date'的解决版本

    DateConverter converter = new DateConverter(defaultValue); ConvertUtils.register(converter, java.uti ...

  5. iostat来对linux硬盘IO性能进行了解

    http://www.php-oa.com/2009/02/03/iostat.html

  6. win10系统调用架构分析

    http://blog.csdn.net/liuyez123/article/details/50992038

  7. Ubuntu远程桌面xrdp方法

    xrdp方式,该方法支持多用户登录并远程桌面. 首先在Ubuntu上安装GNOME界面,在终端输入命令: sudo apt-get install gnome-panel 安装完成后注销用户. 点击自 ...

  8. <a>制作按钮

  9. iOS自定义UICollectionViewLayout之瀑布流

    目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLay ...

  10. mac install php dev

    环境开发配置 mysql 下载mysql压缩包.tar.gz 解压 mv mysql_5.7.10_osx... /usr/local/mysql sudo chown -R root:wheel / ...