一个div高度的问题
我在用PHP试做一个留言板
在IE浏览器下的布局效果基本上合我的意思差不多，就是差一些修正，暂时不管它
我要解决的是，它为什么在火狐浏览器里面一个留言的区域会占那么长
我如何才能让一个留言的 .MsgOut 自动根据.UserInfo或者.MsgContent的高度来自动调节?
我知道大概是因为我在 .UserInfo设置了height:100% ，而它却继承了上一层的高度，上一层又继承了再上一层的高度..MsgOut就继承了body的一个屏幕高度，导致一个MsgOut向下被继承了这个高度，所以占满屏
但IE浏览器会在这方面做到自动根据内容来缩放高度，我不知怎么解决才好..理论上火狐是彻底遵循了CSS规则，但是我却不知道怎样才能让它不占一屏，当然给它一个height的固定值是可以的，然而我却无法预计用户留言的时候会留多少内容，比如他会留言一大堆话怎么办?那就可能超出了固定高度，所以我认为，单个用户的留言显示区域首先将就用户信息或者留言内容div的内容高度来确定自己的高度，请大家指点一下，谢谢.
以下是输出的HTML代码
---------------------------
<html>
<head>
<title>KK留言板</title>
<link rel="stylesheet" type="text/css" href="index.php_files/main.css">
<style>
body
{
background-color:#C0C0C0;
font-size:15px;
}
.MainOut
{
margin:0 auto;
padding:15px;
width:990px;
background-color:#FFFFFF;
}
.Header h3
{
padding:10px;
}
.Message_Board
{
margin:10 0 10 0;
padding:5px;
background-color:#F7E794;
}
.Message_Board caption
{
font-weight:bold;
}
.Submit_Msg
{
margin:10 0 10 0;
padding:5px;
background-color:#ECE9D8;
}
.Submit_Msg label
{
margin-top:20px;
}
.MsgOut
{
padding:10px;
}
.UserInfo
{
float:left;
margin-right:7px;
background-color:#C0C0C0;
width:90px;
padding:7px;
height:100%
}
.UserInfo.UserName
{
font-weight:bold;
}
.MsgFrame
{
//background-color:#FFFFFF;
padding:7px;
}
.MsgFooter .Time
{
color:#8DB0D3;
font-size:14px;
margin-right:5px;
float:right;
}
.both
{
clear:both;
}
</style>
</head>
<body>
<div class="MainOut">
<div class="Header">
<div class="login">
<form action="login">
<label>用户名</label>
<input name="UserName" type="text">
<label>密码</label>
<input name="password" type="password">
<input name="Login" value="登陆" type="submit">
<input name="register" value="注册" type="submit">
</form>
</div>
<br class="both">
<center>
<h3>欢迎您来到KK的留言板^-^ 有什么事要留言给他的,请在此写下信息吧！</h3>
</center>
</div>
<div class="Message_Board"> 大家的留言<br>
<div class="MsgOut">
<div class="MsgIn">
<div class="MsgFrame">
<div class="UserInfo">
<label class="UserName">A同学</label>
</div>
<div class="MsgContent">
<div class="text"> KK你好 </div>
<hr>
<div class="MsgFooter"> <span class="Time">2012-02-02 21:02:14</span> </div>
</div>
</div>
</div>
</div>
<br class="both">
<div class="MsgOut">
<div class="MsgIn">
<div class="MsgFrame">
<div class="UserInfo">
<label class="UserName">B同学</label>
</div>
<div class="MsgContent">
<div class="text"> KK你也好 </div>
<hr>
<div class="MsgFooter"> <span class="Time">2012-02-02 21:02:27</span> </div>
</div>
</div>
</div>
</div>
<br class="both">
<div class="MsgOut">
<div class="MsgIn">
<div class="MsgFrame">
<div class="UserInfo">
<label class="UserName">C同学</label>
</div>
<div class="MsgContent">
<div class="text"> 我来顶你了! </div>
<hr>
<div class="MsgFooter"> <span class="Time">2012-02-02 21:50:20</span> </div>
</div>
</div>
</div>
</div>
<br class="both">
<div class="MsgOut">
<div class="MsgIn">
<div class="MsgFrame">
<div class="UserInfo">
<label class="UserName">D同学</label>
</div>
<div class="MsgContent">
<div class="text"> 念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经
念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经
念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经念经 </div>
<hr>
<div class="MsgFooter"> <span class="Time">2012-02-02 22:23:16</span> </div>
</div>
</div>
</div>
</div>
<br class="both">
<div class="MsgOut">
<div class="MsgIn">
<div class="MsgFrame">
<div class="UserInfo">
<label class="UserName">E同学</label>
</div>
<div class="MsgContent">
<div class="text"> 插队 </div>
<hr>
<div class="MsgFooter"> <span class="Time">2012-02-02 22:23:41</span> </div>
</div>
</div>
</div>
</div>
<br class="both">
</div>
<div class="Submit_Msg"> 请填写留言信息
<form name="Submit_Msg" action="insert_msg.php" method="post">
<br>
<label>名称:</label>
<input name="Nick_Name" type="text">
<br>
<br>
<label>留言内容:</label>
<br>
<textarea rows="10" cols="80" name="Msg"></textarea>
<br>
<br>
<input name="submit" value="提交留言" type="submit">
</form>
</div>
</div>
</body>
</html>
[解决办法]
height:100%导致的
你可以采取这样的结构
<div style="background:#aaa">
<div style="background:#F7E794;float:right;width:880px;padding:0 10px">
<div style="border-bottom:2px solid red">
<span style="float:right">2012-02-02 21:02:14</span>
<span>标题可以不要这块</span>
</div>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<hr>
<div style="text-align:right">2012-02-02 21:02:14</div>
</div>
<div style="width:90px;">A同学</div>
<div style="clear:both"></div>
</div>
