html - 当我折叠时页面 div 消失

Question

我正在尝试做 facebook 风格的消息页面。一切都很顺利。但是，有一个问题。发送消息在页面底部中间的问题。折叠时页面 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;顶部:0；底部:200px。这样，它将占据除底部 200px 之外的所有容器。