html - 将所有子 div 放在父 div 的底部

Question

<div id="admin_chatRoom">
   <div class="msg_box admin-msg-box 1444055123841" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444055123841" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444055193984" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444055193984" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444112696240" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444112696240" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
   <div class="msg_box admin-msg-box 1444123878925" style="float: right;">
      <div class="msg_head "><a onclick="if (confirm(&quot; Are you sure to active this Chat? &quot; )) { return true; } return false;" href="    /demo-home3//chats/activate/1444123878925" title="delete"><span class="fa fa-check"></span></a>&nbsp;&nbsp;</div>
      <div class="msg_wrap" style="display: none;">
         <div class="msg_body">
            <div class="msg_push"></div>
         </div>
         <div class="msg_footer"> <textarea class="msg_input" rows="4"></textarea></div>
      </div>
   </div>
</div>

CSS:

.msg_head{
    background:#f39c12;
    color:white;
    padding:15px;
    font-weight:bold;
    cursor:pointer;
    border-radius:5px 5px 0px 0px;
}
#admin_chatRoom .msg_head{
   background: #d35400
}

.msg_box{
    width:250px;
    background:white;
    border-radius:5px 5px 0px 0px;
}
.admin-msg-box {
    margin-right: 7px;
}
.client_area,#admin_chatRoom{
    position:fixed;
    bottom:-5px;
}
.msg_head{
    background:#3498db;
}

.msg_body{
    background:white;
    height:200px;
    font-size:12px;
    padding:15px;
    overflow:auto;
    overflow-x: hidden;
}
.msg_input{
    width:100%;
    border: 1px solid white;
    border-top:1px solid #DDDDDD;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;  
}
#admin_chatRoom{
    width:100%;

}

J查询:

 $(document).on("click", ".msg_head", function () {
        $(this).next('.msg_wrap').slideToggle('slow');
    });

这适用于单个聊天框。当 .msg_wrap 隐藏时，.msg_head 会到达底部。但是对于不止一个，隐藏聊天框的 .msg_head float 在显示聊天框的上层。我想引用图片以显示我的情况:

在上图中，所有隐藏的 msg_head 都 float 在事件聊天框的级别。但我想要底部隐藏聊天框的所有内容。任何想法？如果这样的问题不应该在这里问，我很抱歉。

Answer 1

你需要使用下面的css

.admin-msg-box {
    margin-right: 7px;
    position: absolute;
    bottom: 0;
    right:0;
}

然后用JS设置框的正确位置