DIV&CSS

未知高度DIV容器未随内部内容高度变化而改变

作者:hayden 日期:2008-07-14

一同事今天找我给帮忙解决个小问题，
最近一直没太多机会弄DIV+CSS,也正想着呢

他的这个问题，刚拿到手，心里有些麻麻的，因为这还是我头一回碰到这问题，大家可以看看下面的演示情况（代码稍微的弄了下，没用的内容删了一些，主要看问题啦），当鼠标经过导航的时候，在IE6下，下面的文章列表会被隐藏掉。

HTML代码

<!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=gb2312" />
<title>无标题文档</title>
<STYLE TYPE="text/css">
	body{
	margin:0px;
	padding:0px;
	text-align:center;
	font-size:12px;
	color:#000000;}
#contain{
	margin:0px;
	width:980px;
	text-align:left;
}
#topmenu {float:left;width:760px;height:60px;margin:3px 0px 4px 0px;}
#topmenu a {
display:block;width:83px;height:24px;line-height:24px;margin:1px 1px 1px 0px;float:left;background:#e9e9e9;text-align:center;text-decoration:none;color:#000;}
#topmenu a:hover {background:#c10705;color:#fff;}
#left{width:553px;float:left;}
#right{width:423px;background:#660033;float:right;}
</STYLE>
</head>

</div>
      <div id="main">
	   <div id="left">
	     <div id="news">
		    <div id="newstop"><a href="#">教育新闻</a><a href="#">学习指南</a></div>
			<div id="newscontent"><img src="images/tu1.gif" /></div>
			<div id="newsgg">
			<ul>
			  <li><a href="#">你是我的朋友你是</a></li>
			  <li><a href="#">你是我的朋友你是</a></li>
			</ul>
			</div>
			<div id="newsneirong">
			 <ul>
			   <li><a href="#" class="biaoti">你是我的朋友你是我的</a></li>
			   <li><a href="#">你是我的朋友你是我的朋友</a></li>
			   <li><a href="#">你是我的朋友你是我的朋友</a></li>
			   <li><a href="#">你是我的朋友你是我的朋友</a></li>
			   <li><a href="#">你是我的朋友你是我的朋友</a></li>
			   <li><a href="#">你是我的朋友你是我的朋友</a></li>
			   <li><a href="#">你是我的朋友你是我的朋友</a></li>
			   <li><a href="#" class="gengduo">>>更多</a></li>
			 </ul>
			</div>
		 </div>

</div>
	   <div id="right"></div>
      </div>
  
   <div id="footer"></div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

凭感觉，是一个大的层，变小了，将内容overflow hidden了~，可是当前CSS中并无此方法啊，不得其解。
大概检查了一下网页结构，也没有未闭合的标签，突然想到了这CSS中，在容器高度的问题上，好像不太完美，是不是某容器的高度不固定呢？测试了一下，给#contain增加了一个高度属性值为1000px问题得到解决，既然问题找到了，也就得变通变通，因为同事的这网页高度不固定的~
呵呵，想必玩CSS的朋友应该有经验，经id="footer"增加一个 clear的属性就OK

不过还是不明白，为什么在IE6下，得鼠标经过链接的时候才会导致这个最外层容器高度改变的情况呢？DIV+CSS的学习之路确实是无奇不有！

由于当前使用的电脑非WEB前端工作电脑，浏览器不全，无法一一测试~

评论: 4 | 引用: 0 | 查看次数: -

[本日志由 hayden 于 2008-07-15 10:30 AM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

[2008-07-16 10:42 AM |

]

hayden

确实，应该是 #left与#right的浮动引起上述问题，Jimbor 正解！很感谢你的回答。

[2008-07-15 08:57 PM |

]

Jimbor

事实上，我觉得这个问题不能怪IE6。还是代码本身没有做清除浮动的缘故。对没有正确清除浮动的代码，各个浏览器处理的方法可能不一样，也可能有缺陷，比如如果先写#right再写#left的话，在IE6下就不会有这个问题了。（一般情况下先右后左都比较保险）。但这样并不能解决本质问题，虽然在ff下面没有发生内容隐藏的现象，如果要对#left的父对象#main进行css定义的话，也看不到效果。所以本质还是清除浮动，事实上在#footer上加clear:both也是不对的。这样并没有解决#left和#right两个浮动层的浮动，这两个层的父层#main才是真正要清除浮动的对象，比如可以在#right之后加一个clear的层。

[2008-07-15 10:31 AM |

]

hayden

不好意思，主要是这里图片显示不出来，我定义了一下图片的大小，再试试呵，错误依就

[2008-07-14 10:16 PM |

]

Jimbor

找了几台机器都没有在IE6下测出你说的效果，确定不是你自己IE6的问题？或者装了啥插件。。。

发表评论

Name (required)
PassWord(游客发言不需要密码.)
正在加载编辑器...
验证码
禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.

未知高度DIV容器未随内部内容高度变化而改变

作者:hayden 日期:2008-07-14

日志信息

相关日志