词条信息

admin
超级管理员
版本创建者 发短消息   
简易百科旧版 >> 关于Div高度自适应问题 >> 历史版本

最新历史版本 :关于Div高度自适应问题 返回词条



  用div嵌套碰见一个浮动DIV父DIV自适应高度问题,给大家共享下,以供大家多个解决方案! 

  使用DIV+CSS制作网页非常方便,再结合FLASH、JS等,制作出来的网页非常绚丽多姿,但是有一个问题一直困扰着,如果页面内使用了嵌套层,而在嵌套层中有一个子层设定了浮动,那么父层的高度就不会随着子浮动的高度变化而随之变化,刚开始解决这个问题的办法就是直接设置父层的高度,但这也只适合在明确页面高度的情况下,如果页面的高度是不确定的,那么在IE及以IE为核心的浏览器中还是可以正常显示的,但是在firefox(火狐)中就会出很明显的错误,页面只能显示设定高度内的内容,这样当然是不行的,后经认真比对发现只是给父层设定一个宽度,就可以自适应子浮动层的高度了,具体的解决方案如下:

<div style="width:936px; height:auto; overflow:hidden">

<div style="width:626px; heigth:auto; overflow:hidden; float:left"></div>

<div style="width:302px; height:auto; overflow:hidden; float:right"></div>

<div sytle="clear:both"></div> <!--辅助DIV:用于清除浮动,保证最外面DIV高度自适应-->

</div>主要是红色代码部分,保证外面DIV高度自适应


  备注:也可以把<div sytle="clear:both"></div>更换成<div class="clear"></div>并且定义 .clear {line-height: 0; height: 0px; visibility: visible; clear: both; font-size: 0px;}