html - DIV 扩展到下面的 DIV

Question

我只是点击了某个似乎是 bug 的东西，或者至少是 CSS/HTML 的一个非常奇怪的特性。现在，问题是我得到了三个连续的 div，它们都在一个父 div 中。

第一个和第二个应该是类似聊天的文本容器。最后一个应该排除在外，是一个分页导航。

在第一页上，效果很好。在所有其他页面上，最后一个文本容器 div 在导航上扩展。使用 Chrome 开发人员工具时，它向我显示第二个 div 仅具有其实际大小，而背景仍在导航范围内扩展。但是如果我删除导航，第二个文本容器会调整到它的实际大小。还有，当使用

position:absolute;

它不会展开。将位置明确设置为相对并没有解决问题，将背景颜色设置为其他颜色也没有改变白色背景。

我在 jsfiddle.net 下为您做了快速演示.那么最后一个问题是:为什么第二个文本 div 会展开？还是不是，但看起来是？

//编辑:正如评论中所建议的，这里是 jsfiddle 之外的原始 CSS/HTML。我仍然认为这不是一个好主意，但如果你这么说......

<div class="decoded_chat" pagenr="1" style="display: block;">
  <div class="decoded_user decoded_user_first" isme="0">

    <a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">

      <img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">

      <div class="decoded_user_name">
        Zuckerberg
      </div>

    </a>

      <div class="decoded_msg_date">
        02.02.2014, 01:36 Uhr
      </div>
      <div class="decoded_msg">
        I will listen to the songs when I'm not so tired
      </div>
      <div class="decoded_msg">
        I don't know.. Possibly
      </div>
      <div class="decoded_user decoded_user_last" isme="0">

        <a href="https://www.facebook.com/4" target="_new" title="Profil aufrufen">

          <img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">

          <div class="decoded_user_name">
            Zuckerberg
          </div>

        </a>

        <div class="decoded_msg_date">
          02.02.2014, 01:33 Uhr
        </div>
        <div class="decoded_msg">
          I've been ill all week.. Just haven't had time for much
        </div>
        <div class="decoded_chat_pager">
          <a href="javascript:void(0);" pagenr="0" class="cloudview_msg_prev">
            « Vorherige Seite
          </a>
          <a href="javascript:void(0);" pagenr="2" class="cloudview_msg_next">
            Nächste Seite »
          </a>
        </div>
      </div>

a {
    text-decoration: none;
    color: white;
}
.chat_list {
    width:100%;
}
.decoded_chat {
    text-align:left;
    width:100%;
    margin:auto;
    background-color:white;
    color:black;
    border-radius:10px;
}
.cloudview_msg_next {
    float:right;
}
.decoded_chat_pager {
    margin:auto;
    margin-top:5px;
    text-align:left;
    width:95%;
}
.decoded_msg {
    margin-bottom:3px;
}
.decoded_user {
    padding:15px 10px;
    min-height:50px;
}
.decoded_user_last {
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}
.decoded_user_first {
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
.decoded_user_name {
    color:black;
    margin-bottom:5px;
}
.mychatmessage {
    background-color:#BFF2BF;
}
.decoded_msg_date {
    float:right;
    color:grey;
    margin-top:-30px;
}
.decoded_user_avatar {
    position:absolute;
}
.decoded_user_name {
    font-weight:bold;
}
.decoded_user_name, .decoded_msg {
    margin-left:64px;
}
table {
    text-align:center;
}
.flipped-180 {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter:"FlipH";
}
#detailopener, #return_to_msg, #return_to_cloud, #cloudview_delete {
    display:none;
}
.chat_list_names {
    color:grey;
}
.invi {
    position:fixed;
    width:1px;
    height:1px;
    top:-2000px;
    left:-2000px;
}
.next_page_chat_list {
    text-align:right;
    padding-right:5px;
}
.last_page_chat_list {
    padding-left:5px;
    text-align:left;
}
.loadingtext {
    margin-top:7px;
}
#opener {
    position:fixed;
    left:25px;
    bottom:25px;
    cursor:pointer;
    display:none;
}
.dontdroponme {
    opacity:0.3;
}
#dropper {
    position:fixed;
    right:25px;
    bottom:25px;
    cursor:pointer;
    display:none;
}
.dropinfo {
    border-radius:7px;
    color:white;
    padding:5px 25px;
}
.dorpinfo img {
    width:48px;
}
.chatlist_button img, .decoded_user_avatar {
    box-shadow:0 0 5px #888;
    border-radius:5px;
}
.chatlist_button {
    background-color:white;
    border-radius:5px;
    box-shadow:0 0 5px #888;
    padding:5px;
    cursor:move;
    max-width:200px;
    margin:auto;
}
.ui-draggable-dragging {
    position:absolute;
    z-index:5;
}
body {
    height:100%;
    margin:0;
    background-color:#3B5998;
    color:white;
    font-size:12px;
    font-family:Calibri;
}
#innerbody {
    margin:auto;
    width:55%;
    text-align:center;
}
#innerbody_floater {
    height:50%;
    width:100%;
    margin:0;
}

Answer 1

复制自http://www.w3schools.com/css/css_positioning.asp

绝对位置元素相对于第一个非静态位置的父元素定位。如果没有找到这样的元素，包含 block 是 html: