当前位置：首页 → 问答吧 → 关于height:auto;的问题

关于height:auto;的问题

时间：2010-05-13

来源：互联网

<!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>
<title>无标题页</title>
<style type="text/css">
#box_1, #box_2 {position:relative; width:300px; height:100px;margin:10px; background:#ddd;}
#box_1 { z-index:100;}
#box_2 { z-index:1;}
#a, #b {position:absolute; width:100px; height:100px; }
#a {background:#c00; }
#b {background:#0c0; left:50px;}
</style>
</head>
<body>
<div id="box_1">
<div id="a">这是第一个块</div>
</div>
<div id="box_2">
<div id="b">这是第二个块</div>
</div>
</body>
</html>

如果#box_1, #box_2 {position:relative; width:300px; height:100px;margin:10px; background:#ddd;} 中的 height:100px改成height:auto;box_1和box_2就重叠在一起，如何解决这个问题。我要做的这个必须要用到height:auto;请各位高手帮帮忙。

作者: yxz860123 发布时间: 2010-05-13

它们会重叠在一起的原因不在于它们自身，而在于#a和#b，因为#a和#b是position:absolute;你将这句去掉,再改你说的height:100px为height:auto;再看看吧

作者: noboat945 发布时间: 2010-05-13

关键是#a和#b的position:absolute;我也要用到的。

作者: yxz860123 发布时间: 2010-05-13

<!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> <title>无标题页</title> <style type="text/css"> #box_1, #box_2 {position:relative; width:300px; height:100px;margin:10px; background:#ddd;} #box_1 { z-index:100;} #box_2 { z-index:1;} #a, #b {position:absolute; width:100px; height:100px; } #a {background:#c00; } #b {background:#0c0; left:50px;} </style> </head> <body> <div id="box_1"> <div id="a">这是第一个块</div> </div> <div id="box_2"> <div id="b">这是第二个块</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: cwq2jxl 发布时间: 2010-05-13

没发现你所说的重叠用min-height试试

作者: AyumiHamasaki 发布时间: 2010-05-13

#box_1, #box_2 {position:relative; width:300px; height:100px;margin:10px; background:#ddd;}
中height为auto；

作者: yxz860123 发布时间: 2010-05-13

用过了，不管用

作者: yxz860123 发布时间: 2010-05-13