一个div高度的有关问题
日期：2014-05-17 浏览次数：20801 次
一个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="MsgF
我在用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="MsgF
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
