一、宽度自适应

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

原文链接：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. Check the difficulty of problems

    Check the difficulty of problems Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5830 Acc ...

  2. A Knight's Journey 分类： POJ 搜索 2015-08-08 07:32 2人阅读 评论(0) 收藏

    A Knight's Journey Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 35564 Accepted: 12119 ...

  3. Uva 12186 工人的请愿书

    题目链接:https://uva.onlinejudge.org/external/121/12186.pdf 题意: 给出一个树状关系图,公司里只有一个老板编号为0,其他人员从1开始编号.除了老板, ...

  4. Entity Framework 第一篇

    这段时间研究了orm框架EF 写一写研究的历程和心得 先贴上核心代码 public interface ITransaction { bool IsTransaction { get;} void B ...

  5. IIS与Apache共用80端口方法[试用成功]

    然后假设apache服务器已经安装完成,打开httpd.conf配置文件,找到这些地方去掉#开启代理模块: LoadModule proxy_module modules/mod_proxy.so L ...

  6. loadrunner安装汉化破解

    1.解压loadrunner11,点击setup.exe安装loadrunner11. 遇到问题,"...输入命令\来解决". 解决办法:运行解压包的loadrunner-11安装 ...

  7. iOS深入学习（UITableView系列2：reloadData）

    接着前一篇的博客来深入学习UITableView, UITableView的数据源是NSMutableArray的对象_infoArray,现在数组的内容为{@"Zero",@&q ...

  8. Til the Cows Come Home(poj 2387 Dijkstra算法（单源最短路径）)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32824   Accepted: 11098 Description Bes ...

  9. Hibernate 查询语句

    Hibernate查询语言(HQL)是一种面向对象的查询语言,类似于SQL,但不是对表和列操作,HQL适用于持久对象和它们的属性. HQL查询由Hibernate转换成传统的SQL查询,这在圈上的数据 ...

  10. CSRF的防御实例（PHP）

    CSRF的防御可以从服务端和客户端两方面着手,防御效果是从服务端着手效果比较好,现在一般的CSRF防御也都在服务端进行. 1.服务端进行CSRF防御 服务端的CSRF方式方法很多样,但总的思想都是一致 ...