先看这样一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- equiv="Content-Type" c /> <title>DIV高度无法自适应</title> <style type="text/css"> #all { width:240px; padding:10px; font-size:12px; color:#FFF; background-color:#CCC; } #sub { float:left; width:230px; line-height:20px; padding:0 5px; background-color:#F90; } </style> </head> <body> <div id="all"> <div id="sub"> 外层DIV高度无法自适应 。</div> </div> </body> </html>
1、问题：运行这段代码可以看到，在IE下一切正常，但在FireFox或IE7下，父对象All没有适应子对象Sub的高。飞飞@Asp技术乐园
2、解决方法：
例中，XHTML代码：“<div id="all"><div id="sub">外层DIV高度无法自适应。 </div></div>”，其CSS为：“#all {width:240px;...} #sub {float:left;...}”。
由于子对象Sub设置了浮动（float:left），而父对象All没有设置浮动，所以才会出现这样的问题。
（1）将父对象也设置浮动。即把“float:left;”加到“#all {...}”中。
（2）将子对象的浮动属性去掉。即把“float:left;”从“#sub {...}”中删除。
（3）在“<div id="sub">外层DIV高度无法自适应。</div>”的后面加一个空的块级对象，并设置 “clear:both;”取消浮动。如“<div style="clear:both"></div>” 。飞飞As@p技术乐园但此方法在IE中仅限于有两个或两个以上的浮动子对象时才生效，只有一个浮动子对象，用此方法底下会多出10px的高度。
由方法（2）又想到了一个新问题，如果类似论坛中，一个话题分左右两边的布局，而且左右分别都有固定的宽度时就必须要用到浮动属性。如：
<div id="all"> <div class="sub"><div class="left">左边是用户头像</div><div class="right">右边是话题内容</div></div> ... </div>
这种情况下方法（2）和方法（3）就不适用了。因为方法（2）是将子对象的浮动属性去掉，而去掉浮动属性就不可能实现；方法（3）仅适用于有多个浮 动对象，但如果恰巧只有1条记录呢？除非下面不在乎那10px。此时我向最适用的就是方法（1）了。
解决方法小结：
1、父元素也浮动 （没有指定宽度的float应当伸缩包装到浮动内容的宽度）
2、clear属性
3、为父层设置 {overflow:auto; _height:1%;} 前者针对火狐IE7（overflow:auto 或hidden） 后者针对IE6(_height:1% 或he\ight:1%)
* html .clear{height:1%}
4、父元素设置高度宽度
5、针对 火狐
#d1:after
{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
其他小技巧：
html也要设置100% ，对后面的div可能会有影响
html,body{
height:100%;
margin:0;
}
设置 div为绝对定位.
style="width:500px; height:100%!important; background:#003333; position:absolute;"
./#/需要自动高度的地方
{
min-height:500px;
height:auto;/*IE7*/
_height:500px;/*IE6*/
display:table;/*firefox,opera*/} 在FF下一个自适应高度的简单做法
加上
height: 100%;
overflow: auto;
自动换行的简单做法
table-layout: fixed;
WORD-BREAK: break-all;
WORD-WRAP: break-word;
怎样用CSS把层做成半透明？
用下面的样式表定义你的层
.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝
解释：
Opacity=开始的不透明度(100的话就不透明了)
FinishOpacity=结束的不透明度(100的话就不透明了)
Style=样式，从0开始，1.2.3....有均匀透明啊，放射形状透明啊...
StartX=开始透明的X坐标，基本上为图片、层的左上角（0）
StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0）
FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度）
FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度）
|
