Question

我试图做facebook风格的留言页面。一切都很顺利。但是，有一个问题。在页面底部中间发送消息的问题。当我崩溃时，Page div消失了。

这是我的DEMO页面

这是我的 HTML 代码

<div class="messages_area">
  <div class="kmes"></div>
    <div class="mrspbx">
     <div class="some-content-related-div">
       <div id="reply_content" class='conversationReply_grid'>

       </div>
     </div>
    </div>
 <div class="mpare">
   <input type="hidden" id="cid" value="">
      <textarea name="update" id="update" maxlength="200" style="width:524px !important; "></textarea>
<input type="submit" value=" REPLY " id="update_button" class="reply_button repplybutton update_box"/> 
 </div>
</div>

CSS 代码：

body {
  margin:0;
  padding:0;
  height:100%;
}

.messages_area {
  float:left;
  position:fixed;
  width:500px;
  height:100%;
  border-right:1px solid #d8dbdf;
  margin-left:263px;
}
.kmes {
    float:left;
    width:500px;
    heighrt:40px;
    border-bottom:2px solid #d8dbdf;
    margin-top:40px;
    }
.mrspbx {
    float:left;
    width:500px;
    height:80%;
    overflow-x:hidden;
    overflow-y: auto;
    position:relative;
    }
.mpare {
    left: 0;
    float:left;
    width:499px;
    height:200px;
    border:1px solid #cdcecf;
    background-color:#f2f2f2;
    bottom:0px;
    z-index:99;
    }

我需要做什么？有人可以帮帮我吗？

Answer 1

如果您的问题是.mpare看起来不像200px高的原因，那么它实际上是;但是，它在容器外溢出（.messages_area）。

我从你希望它出现在底部的bottom: 0px中取出它。为了实现这一点，您需要更改.mpare的定位，以便它是绝对的。在CSS中添加position: absolute可以解决这个问题。

<强>更新：

要避免.mrspbx重叠.mpare，请制作.mrspbx position: absolute; top: 0; bottom: 200px。这样，除了底部200px之外，它将占用所有容器。

Answer 2

这是因为div＆＃34; .rspbx＆＃34;是80％高，其余的内容不高达20％的高度。这意味着当有很多空间时，一切都适合（因此所有其他内容加起来约为高度的20％），但是当空间较小时，其他div加起来超过20％高度，所以内容从页面底部推开。混合百分比和固定像素属性时要小心 - 它并不总能很好地混合。

（希望这是可以理解的......）

崩溃后，Page div消失了

2 个答案: