Html 绝对子对象不可滚动

基本上我是想让聊天信息可以滚动。然而，到目前为止，内容似乎不可滚动。当“chat messages wrapper”类是相对类时，它会很好地滚动，但是我希望聊天消息最初出现在底部，这就是为什么我将其切换为绝对

Html:

下面是一个包含完整代码的JSFIDLE：

---

您需要给

聊天信息包装提供
最大高度

为了开始工作，您需要为
.chat messages wrapper
元素指定一个显式（最小/最大）
高度

但是，由于框是绝对定位的，因此可以使用
top
和
bottom
属性来实现相同的效果：


。聊天信息包装器{
位置：绝对位置；
左侧填充：7px；
右侧填充：7px；
/*高度：自动*/
底部：40px；/*=底部元件的高度*/
顶部：32px；/*=顶部元件的高度*/
溢出y：自动；
}
当您绝对定位某个对象时，它不会移动，因为它已从文档流中删除。如果我没有弄错的话（我可能会弄错），这包括滚动。在这种情况下，您需要使用JavaScript或至少CSS转换来移动绝对定位的元素。
<div class="chat-widget">
   <div class="header">Social Chat</div>
   <div class="chat-messages-wrapper">
      <div class="chat-message">
         <img class="profile-image" src="../Content/images/facebook-profile.png" /> <span class="header-1">
         <img class="logo" src="../Content/images/facebook-logo.png" />
         <span class="username">Jens Olsen says:</span>
         </span> <span class="header-2">
         <button class="reply btn btn-primary btn-xs">Reply</button>
         <button class="like btn btn-success btn-xs">Like</button>
         <button class="spam btn btn-danger btn-xs">Spam</button>
         <span class="date">5:03PM</span>
         </span>
         <div class="text">This is the chat message. This is the chat message.</div>
      </div>
      <div class="chat-message">
         <img class="profile-image" src="../Content/images/facebook-profile.png" /> <span class="header-1">
         <img class="logo" src="../Content/images/twitter-logo.png" />
         <span class="username">Jens Olsen says:</span>
         </span> <span class="header-2">
         <button class="reply btn btn-primary btn-xs">Reply</button>
         <button class="like btn btn-success btn-xs">Like</button>
         <button class="spam btn btn-danger btn-xs">Spam</button>
         <span class="date">5:03PM</span>
         </span>
         <div class="text">This is the chat message. This is the chat message.</div>
      </div>
      <div class="chat-message">
         <img class="profile-image" src="../Content/images/default-avatar.png" /> <span class="header-1">
         <span class="username">Jens Olsen says:</span>
         </span> <span class="header-2">
         <button class="reply btn btn-primary btn-xs">Reply</button>
         <button class="like btn btn-success btn-xs">Like</button>
         <button class="spam btn btn-danger btn-xs">Spam</button>
         <span class="date">5:03PM</span>
         </span>
         <div class="text">This is the chat message. This is the chat message.</div>
      </div>
   </div>
   <div class="reply-box">
      <input class="reply-text" placeholder="Type your message here..." />
      <button class="btn btn-primary reply-button">Send</button>
   </div>
</div>

.chat-widget {
    position: fixed;
    right: 5px;
    bottom: 5px;
    height: 95%;
    width: 300px;
    background-color: #FFF;
    border: solid 3px #3B5998;
    overflow: hidden;
}

    .chat-widget .header {
        text-align: center;
        font-size: 18px;
        color: #FFF;
        background-color: #3B5998;
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 5px;
    }

.header {
    position: relative;
    z-index: 2;
    width: 100%;
}

.chat-messages-wrapper {
    position: absolute;
    bottom: 40px;
    padding-left: 7px;
    padding-right: 7px;
    height: auto;
    overflow-y: auto;
}

.chat-message {
    padding-top: 5px;
    position: relative;
    border-bottom: solid 1px #000;
    overflow-y: auto;
}

    .chat-message .profile-image {
        height: 48px;
        width: 48px;
        border: solid 1px #000;
        margin-right: 5px;
    }

    .chat-message > .header-1 {
        position: absolute;
        height: 20px;
    }

        .chat-message > .header-1 .logo {
            width: 75px;
            height: 20px;
        }

        .chat-message > .header-1 .username {
            font-weight: bold;
        }

    .chat-message > .header-2 {
        position: absolute;
        top: 30px;
        height: 20px;
    }

        .chat-message > .header-2 > .reply {
            width: 50px;
        }

        .chat-message > .header-2 > .like {
            width: 50px;
        }

        .chat-message > .header-2 > .spam {
            width: 50px;
        }

        .chat-message > .header-2 .date {
            font-style: italic;
            position: relative;
            right: 0px;
        }

    .chat-message .text {
        position: relative;
        margin: 5px;
    }

    .chat-message:last-child {
        border-bottom: 0px;
    }

.reply-box {
    overflow-y: auto;
    position: absolute;
    bottom: 5px;
}

    .reply-box .reply-text {
        width: 70%;
        height: 32px;
    }

    .reply-box .reply-button {
        width: 25%;
    }