当前位置：首页 → 问答吧 → 底层的DIV使用height:auto为什么无效?

底层的DIV使用height:auto为什么无效?

时间：2011-02-18

来源：互联网

在#main_center设了高度=400

#main_center的background:#093;才会显示

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #main_center{ margin:8px 8px auto 8px; height:400px; background:#093;} .main_center_left{ width:160px; float:left; background:#333; height:400px; margin-right:10px;} .main_center_right{ width:783px; float:right; background:#906; height:400px;} .main_center_right_side{ width:200px; float:right; background:blue; height:400px;} .center_news{ width:573px; margin-right:10px; float:left; height:400px; background:#666;} </style> </head> <body> <div id="main_center"> <div class="main_center_left">160width</div> <div class="main_center_right"> <div class="center_news"> </div> <div class="main_center_right_side">200width</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

如果将高度改做auto却不能显示background:#093; 的属性

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #main_center{ margin:8px 8px auto 8px; height:auto; background:#093;} .main_center_left{ width:160px; float:left; background:#333; height:400px; margin-right:10px;} .main_center_right{ width:783px; float:right; background:#906; height:400px;} .main_center_right_side{ width:200px; float:right; background:blue; height:400px;} .center_news{ width:573px; margin-right:10px; float:left; height:400px; background:#666;} </style> </head> <body> <div id="main_center"> <div class="main_center_left">160width</div> <div class="main_center_right"> <div class="center_news"> </div> <div class="main_center_right_side">200width</div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

相信这应该是个很简单的基础问题?

但我想了一下也是没想出个解释

我知道当然可以手动设定高度来解决，但是想知道这原因是什么?

请熟CSS的朋友帮个忙，知道的出来说说

[ 本帖最后由 sky94132003 于 2011-2-18 21:25 编辑 ]

作者: sky94132003 发布时间: 2011-02-18

浮动导致的。

height:400px;可以换成zoom:1;overflow:hidden;试试

zoom:1会触发ie（ie8以下）的haslayout，刚好能清理浮动。
overflow:hidden;则对其他浏览器起作用（其实对ie7也会起作用）。

另外，height:400px;同zoom:1;一样会触发ie（ie8以下）的haslayout，但auto值却不会。

作者: ONEBOYS 发布时间: 2011-02-19

浮动是会脱离文档流的，内部两个层就不会局限于#main_center层。所以#main_center不知道内部的高度。
但清理浮动，可以把他们“拉”回来。

作者: ONEBOYS 发布时间: 2011-02-19