一、宽度自适应

三列布局左右固定、中间不固定或者两列布局，左边固定右边不固定

原文链接：http://www.cnblogs.com/2050/archive/2012/07/30/2614852.html

看下代码结构：

效果为：

中间列要不要设置margin-left和margin-right ?

注意，中间那列需要把左右两个外边距分别设为左右两列的宽度，否则会有些问题。如下：

在谷歌、火狐等标准浏览器下是这样的（包括IE8+）：

而在IE6、IE7中是这样的（图是在IE6下截的）

我们可以看到中间那列子元素的margin-left或margin-right的起点是不一致的，在IE6、IE7中，即使不给中间列设定margin-left和margin-right,它的子元素的左右外边距的起点仍然是在左右两列宽的的基础上的，就像是有margin-left和margin-right一样。所以为了各浏览器保持一致，中间那列还是设一个margin-left和margin-right为好。

IE6中的3px间隙bug

在上图的ie6截图中，我们看到各列之间有一条3px的间隔，这是只有IE6才有的问题。

如果中间那列的margin-left和margin-right都为0的话，则只要把左列的margin-right设为-3px,右列的margin-left设为-3px就行了。

但如果把中间列的margin-left和margin-right分别为左右两列的宽度时（上面已经说了，这也是必须这样做的），即使把左列的margin-right设为-3px,右列的margin-left设为-3px也还是没有效果。这时候还得把中间列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行。如下：

最终css为:

二、高度自适应

原文链接：http://www.cnblogs.com/2050/archive/2012/07/30/2615260.html

在IE7+ 和 W3C浏览器中的方案

看下代码：

再看下效果：

在IE6中的方案

好吧，不想再对IE6吐槽，只想尽快搞定它。

在IE6中的思路是，把html和body元素的高度设定为100%，即浏览器窗口的高度，然后利用padding-top在html元素上挤出一点空间来，因为绝对定位的最高参照物是参照html元素的，所以可以把顶栏绝对定位在html的padding-top那块空间上。这时body的高度就是html的高度（也是浏览器窗口的高度）减去html的padding-top的值，这也是ie6非常奇怪的一个特性，因为按照w3c盒模型来讲，增加了html元素的padding-top,则html元素的高度也会相应增加，这时浏览器窗口应该会出现垂直滚动条了。但IE6不会，html的增加了padding-top后，整个html元素的高度还是保持不变，即浏览器窗口的高度，变化的是body的高度减小了，用来抵消html的padding-top.

还是先看看代码吧：

再看下效果：

最终的兼容代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
html,body{ height:100%;}
body,div{ margin:0; padding:0; color:#F00;}
* html{ padding-top:100px;}/*for ie6*/
.top{ background:#36C; height:100px;}
* html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/
.main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;}
* html .main{ background:#F90; position:static; height:100%;}/*for ie6*/
</style>
</head>
<body>
<div class="top">我是top，固定高度</div>
<div class="main">我是main，高度随浏览器大小变化而变化<p style="height:500px;"></p></div>
</body>
</html>

效果图：

非ie6

ie6

推广

这种方法也适用于顶栏与底栏高度固定，中间那栏高度自适应的三栏布局

[css] 自适应布局 移动端自适应的更多相关文章

  1. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  2. rem自适应布局-移动端自适应必备:flexible.js

    http://caibaojian.com/flexible-js.html

  3. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  4. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  5. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  6. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  7. css实现九宫格图片自适应布局

    我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代 ...

  8. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  9. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

随机推荐

  1. Android GridView 第一个Item 点击没反应

    @Override public View getView(final int position, View convertView, ViewGroup parent) { final ViewHo ...

  2. The shortest problem

    The shortest problem Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...

  3. Unity重力的测试

    其实和想象的结果还是有点出入 斜坡测试 (非悬空,直接把地面旋转成斜坡) 在非悬空状态下是不会受到斜坡的影响,只有进入悬空再进入斜坡,才会滑下去 一帧内关闭碰撞器再打开,或者一帧内打开Trigger再 ...

  4. Poj(1274)，二分图匹配

    题目链接:http://poj.org/problem?id=1274 The Perfect Stall Time Limit: 1000MS   Memory Limit: 10000K Tota ...

  5. corefile的设置与使用

    一.简介 corefile是Linux下程序崩溃时生成的文件,可以用来分析程序崩溃的原因,因为它内部包含了程序崩溃时的堆栈信息. 二.corefile的设置 默认情况下,程序崩溃是不会生成corefi ...

  6. Linux的bg和fg命令简单介绍

    我们都知道,在 Windows 上面,我们要么让一个程序作为服务在后台一直运行,要么停止这个服务.而不能让程序在前台后台之间切换.而 Linux 提供了 fg 和 bg 命令,让我们轻松调度正在运行的 ...

  7. [美]莫提默 J. 艾德勒《如何阅读一本书》

      我最近在阅读一本书,这本书的书名叫<如何阅读一本书>(商务出版社,2015),顾名思义.   作者认为,阅读是一件跟写书一样复杂的活动,而许多人并不会阅读. 看过后,你可能会有“我真没 ...

  8. Tomcate配置单向双向SSL

    1.单向SSL 一.在Tomcate的service.xml文件中放开SSL配置 <!-- <Connector port="8443" protocol=" ...

  9. 收集的55个Linux系统管理中常用的一些shell命令

    .显示消耗内存/CPU最多的10个进程 代码如下: | tail | tail .查看进程 按内存从大到小排列 代码如下: ps -e -o "%C : %p : %z : %a" ...

  10. HDU 2289 CUP 二分

    Cup Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...