???? 在平时做DIV+CSS的开发中,经常会遇到,把一个div的高度固定,然后,里面在嵌套一个div,但是里面的div的内容增多的时候,可以把外面的div撑开,但同时又保证里面的div没有东西是,外面的div保持一定的高度。主要解决办法是在外面的div使用min-height这个属性,来保证他的高度,这个属性支持IE7以上各个版本和FF 、chrome等浏览器,但是IE6不支持,因此还要加多一个:_height 。
下面我做了一个demo:
?
?
<!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" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*out 有它自己的最小高度200px,可以自动适应in的自动扩展*/ body {width:100%; height:100%;} .out{ width:500px; overflow:hidden; min-height:200px; _height:200px; _overflow:auto; background-color:#09C; } .in{ width:300px; background-color:#FFF; } .bottom{ width:500px;; height:60px; background-color:#900; } </style> </head> <body> </body> <div class="out"> <div class="in"> 撑开<br /> 撑开<br />撑开<br /> 撑开<br /> 撑开<br />撑开<br /> 撑开<br /> 撑开<br />撑开<br /> 撑开<br /> 撑开<br />撑开<br /> 撑开<br /> 撑开<br />撑开<br /> 撑开<br /> 撑开<br />撑开<br /> 撑开<br /> 撑开<br />撑开<br /> </div> </div> <div class="bottom"></div> </html>
?
1 楼
zxzxvv
2011-10-31
.out 里面的样式 overflow:hidden; 这一项得去掉,否则IE6不兼容。。
还有即使,如果in这个DIV里面放的如果不是<Br/>这个标签,
而是很多个浮动的span,或者div,或者lable标枪
类似与下面这种
<span style="display:block; float:left; height:30px; width:80px;">123123</span>
楼主再看看效果
还有即使,如果in这个DIV里面放的如果不是<Br/>这个标签,
而是很多个浮动的span,或者div,或者lable标枪
类似与下面这种
<span style="display:block; float:left; height:30px; width:80px;">123123</span>
楼主再看看效果
2 楼
h5566h
2011-11-20
zxzxvv 写道
.out 里面的样式 overflow:hidden; 这一项得去掉,否则IE6不兼容。。
还有即使,如果in这个DIV里面放的如果不是<Br/>这个标签,
而是很多个浮动的span,或者div,或者lable标枪
类似与下面这种
<span style="display:block; float:left; height:30px; width:80px;">123123</span>
楼主再看看效果
还有即使,如果in这个DIV里面放的如果不是<Br/>这个标签,
而是很多个浮动的span,或者div,或者lable标枪
类似与下面这种
<span style="display:block; float:left; height:30px; width:80px;">123123</span>
楼主再看看效果
谢谢你的指点,我后来也发现这个问题了,overflow是不能去掉的,如果去掉就会出现你说的第二种情况,所以针对IE6的情况,可以在out加多一个属性_overflow:auto 这样就可以既对其他浏览器对float标签的撑开,也可以用在IE6