展会信息港展会大全

css div自适应高度(兼容ie,firefox,ie8)
来源:互联网   发布日期:2016-03-25 16:31:46   浏览:1787次  

导读:先看一个例子: html:111cn.net代码如下:<ul> <li></li> <li></li> </ul>css:111cn.net代码如下:ul { margi...

先看一个例子:

html:

111cn.net代码如下:

<ul>

<li></li>

<li></li>

</ul>

css:

111cn.net代码如下:

ul {

margin:0;

padding:10px;

list-style:none;

background-color:#006699;

}

ul li {

width:100px;

height:100px;

float:left;

margin-right:10px;

background-color:#99cc00;

}

在各个浏览器中的效果一致:

可以看到,外面 ul 即蓝色的区域高度为0,如果没有设置 padding,这个 ul 是看不到的。当然要让它伸长也很简单,只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了html结构,不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。

注意:自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。

第一种方法:

ie 支持一个 css 属性 zoom, 这个元素接受一个数字或一个百分数,表示这个元素放大(缩小)的比例。例如:zoom:0.5或zoom:50% 表示缩小一半,而zoom:2或zoom:200%则表示放大一倍。

当定义了这个属性之后在 ie 浏览器里面就会自动适应高度了。当应用了这个属性之后,ie 就会自动伸长了。一般情况下我们不需要放大或缩小,所以定义 zoom:1 就行了。现在的 css:

111cn.net代码如下:

ul {

margin:0;

padding:10px;

list-style:none;

background-color:#006699;

zoom:1; /* ie */

}

而非 ie 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营:ie 和 非ie。

对于非 ie 浏览器需要用到一个伪类 :after (ie 浏览器不支持)。css 代码如下:

111cn.net代码如下:

ul:after {

content:".";

display:block;

clear:both;

height:0;

}

:after 伪类用于向元素后面插入一段内容,即 content 属性。然后在这个插入的内容里清除浮动,我们可以想象成在最后一个 <li> 后面插入了一个 <span>.</span>里面的内容是一个”.”,然后设置display:block; clear:both; height:0; 等属性 (这个比喻不一定准确)。

我们看下在 firefox 下面的效果:

可以看到 ul 已经自动伸长了,但下面有个小小的黑点。相信你已经猜到了,这个黑点对应的就是 content:”.” 。

这个黑点肯定是要去掉的啦,我们可以用 font-size:0;line-height:0; 将其去掉。

好了,现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的css代码:

111cn.net代码如下:

ul {

margin:0;

padding:10px;

list-style:none;

background-color:#006699;

zoom:1;/* ie */

}

ul:after {

content:".";

display:block;

clear:both;

height:0;

font-size:0;

line-height:0;

}

第二种方法

我刚说过不止一种方法可以解决,那现在就来说说第二种方法。第二种方法还要更简单一些。同样,需要将浏览器分成两个阵营。不过和上一个有所不同,这一次 ie7 站到了另外一个阵营。即 ie7, firefox, opera, safari 等(这里暂时称为a浏览器)。对于这些浏览器,只要定义一个 overflow:auto; 即可,但是对于 ie6 和 ie5 (称为b浏览器)却不起作用。不过要 ie6,ie5 听话也很简单。只要定义一个高度即可,哪怕是 0 ,也会自动伸长。知道这些还没用,我们还得区分这两个阵营的浏览器才行。怎么区分呢?

a 浏览器支持属性选择符,而b浏览器不支持。

所以以下代码只有a浏览器才会执行。

111cn.net代码如下:

[xmlns] ul { /* html[xmlns] ul 的简写 */

overflow:auto;

}

需要注意的是html 必须要有< !doctype >头部以及<html>有xmlns属性才会起作用。不过这个问题似乎不大,现在绝大部分网页都有这两个东东,包括 dreamweaver 默认新建的网页都会自动加上。

而对于b浏览器则可以通过以下方式:

111cn.net代码如下:

* html ul {

height:1%;

}

其实 height 完全可以写成 0,为什么要写1%呢?告诉你其实我也不知道,大家都这么写。

好了,第二种方法的 ul 全部样式代码如下:

111cn.net代码如下:

ul {

margin:0;

padding:10px;

list-style:none;

background-color:#006699;

}

[xmlns] ul { /*html[xmlns] ul 的简写*/

overflow:auto;

}

* html ul {

height:1%;

}

现在既然有两种方法,那么那一种更好呢?我个人比较喜欢第二种方法。原因很简单,代码更少,而且是符合标准的。只是在极少数情况下会出现滚动条,所以应该这两种方法配合使用。

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港