总结:min-height:100px;height:auto;的用法

总结:min-height:100px;height:auto;的用法

1、IE6有个BUG,就是如果指定了一个盒子的高度,但里面内容又溢出了,那这个盒子的高度则会失去作用,盒子的高度会随着内容的增长而自动增长

(即内容不会溢出,而是把盒子撑大)

2、IE7.0,8.0,FF如果在高度的方向内容溢出,它下面的弟弟元素会和上面的内容交叠在一起

(当内容少于height:100px;的高度时,不用加min-height:100px;height:auto;各浏览器的效果都是相同的)

CSS代码

<styletype="text/css">

<!--

#one{

height:100px;

width:300px;

background:#ccc;

border:1pxbluesolid;

font-size:12px;

}

#two{

height:100px;

width:300px;

background:#0CF;

border:1pxbluesolid;

font-size:12px;

}

-->

</style>

</head>

<body>

<divid="one">

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

</div>

<divid="two">

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

</div>

</body>

如下图所示

IE6.0显示效果

IE7.0显示效果

IE8.0,FF显示效果

为了让各浏览器的盒子高度随内容高度的增加而增长

我们写代码如下(只要在原代码的基础上加min-height:100px!important;

height:auto!important;)

<styletype="text/css">

<!--

#one{

height:100px;

min-height:100px!important;

height:auto!important;

width:300px;

background:#ccc;

border:1pxbluesolid;

font-size:12px;

}

#two{

height:100px;

width:300px;

background:#0CF;

border:1pxbluesolid;

font-size:12px;

}

-->

</style>

</head>

<body>

<divid="one">

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

<p>111111111111111</p>

</div>

<divid="two">

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

<p>22222222222222</p>

</div>

</body>

测试后IE6.0,7.0,8.0FF各浏览器盒子高度随内容高度的增加而增长

如下图所示:

但仔细测量各浏览器下每个盒子的高度,我们发现各不相同(这个问题还没有解决)

IE6.0,7.0总高度如下图

IE8.0,FF总高度如下图

问题的解决方法:一定将height:880px;放在最后写。

<title>无标题文档</title>
<style type="text/css">
总结:min-height:100px;height:auto;的用法
#left_right{
width:968px;
height:auto;
}
#left{
width:743px;
background:green;
height:auto !important;
min-height:880px;
height:880px;
float:left;
}
#right{
float:right;
width:221px;
background:red;
height:auto !important;
min-height:150px;
height:150px;
}
</style>
</head>

<body>
<div id="left_right">
<divid="left">dfdf</div>
<divid="right">sdfd</div>
</div>
</body>
</html>

关于div高度自适应问题,兼容IE和火狐

  在此,并不是指div的高度可以简单的自动调整。而是指在该div中没有置放内容的情况下,至少要保持这个div的高度为多少,而有内容的时候,又会随着内容的多少而自动调整。同时,对IE或是FF等浏览都可以兼容的。举个实例:

  div要求至少高度需要200px。也就是说,即使div中没有任何内容,高度也需要保持在200px;当DIV中的内容高度超过200px时,则该div会自动调节高度,而且又兼容各浏览嚣。怎么解决呢?

  对于初学者来说,可能想到的就是min-height:200px这个和height:auto这样的写法了。虽然这样写法用IE浏览器浏览是正常的,可是如果用火狐浏览嚣一测试一下,就知道不兼容而达不到预想的效果了。为什么会这样呢?原来是因为火狐浏览器此时不以height:auto这个执行为标准的。那要加上什么属性才可以让两个浏览器都正常去解读css呢?办法就是加上height:auto!important这个重要属性。所以答案是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="Author"content="Div+CSS专业网页布局,www.divss.com" />
<meta name="keywords"content="div+css,网页布局,jpg切割布局,网页切割css,wap页面布局,网站重构"/>
<title>div+css自动调整高度</title>
</head>
<body>
<div>
此层最少高度为200px,也就是说,即使div中没有任何内容,高度也会保持在200px,当DIV中的内容超过500px时,则自动增加DIV的高度。这个对IE或是FF等浏览器都会兼容的。(背景色是为了方便查看效果用的)<br/>
</div>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------------------------

需要注意的是:在针对一个需要定高度,同时又希望能高度随内容的变化自适应的话,写发的顺序要注意;下面是正确的定义顺序;

height:auto!important; min-height:388px; height:379px;

DIV有背景颜色的时候,DIV被撑开但是背景颜色没有被撑开,只要加上如下代码就可以了
overflow:hidden;

  

爱华网本文地址 » http://www.aihuau.com/a/25101012/144488.html

更多阅读

泡妞必备:最强逗MM开心的短信

泡妞必备:最强逗MM开心的短信——简介想让男人进一步的对你有好感,自然少不了短信互动了,那么哪些短信能让女人记住呢?对你的印象深刻呢?一起来看看!泡妞必备:最强逗MM开心的短信——方法/步骤泡妞必备:最强逗MM开心的短信 1、如果说烧一

分享:鉴定中华烟礼品真假的详细方法

分享:鉴定中华烟礼品真假的详细方法——简介 对于烟礼品,一般过年过节都少不了的,烟酒礼品已经是中国人传统送礼必送的。所以,怎么鉴定中华烟礼品,就显得十分有必要了,其中软盒中华烟与硬盘中华烟的鉴定方法也有所不一样,下面,小编和大家一

matlab的使用:8 如何画不同类型的三维图像

matlab的使用:[8]如何画不同类型的三维图像——简介这是本系列经验的第八篇,主要介绍用matlab软件画三维图像的一些相关函数,使用这些函数可以很方便的画出想要的图形,非常直观好用。matlab的使用:[8]如何画不同类型的三维图像——工具/

樱花大战五:这么长时间,我的爱

樱花大战五:这么长时间,我的爱开发商:红娱乐出版商:日本伊智流派:SRPG /星际约会发行日期:二零一零年三月三十〇号很长一段时间的读者知道,樱大战是我最喜欢的视频游戏系列的所有时间。演员,动画,战斗系统,音乐,人物关系,所有这些都为游戏,我宁愿

声明:《总结:min-height:100px;height:auto;的用法》为网友指間噯分享!如侵犯到您的合法权益请联系我们删除