html - 设置高度时滚动条表现异常

Question

我正在尝试创建一个聊天小部件，它看起来像这样:

我想做的是为整个聊天指定一个最大高度，然后填写所有内容，而无需在聊天本身内指定任何固定高度。我的代码如下:

HTML

<section class="boxlr-chat">
    <div class="boxlr-chat-header">
        {{ Title }}
        <span>{{ Subtitle }}</span>
    </div>
    <ul class="boxlr-chat-messages">
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
        <li>{{ Message }}</li>
    </ul>
    <form action="#" class="boxlr-chat-form">
        <input type="text" />
        <button type="submit">Send</button>
    </form>
</section>

CSS

.boxlr-chat {
    width: 100%;
    max-height: 200px;

    background-color: #1abc9c;
}

.boxlr-chat-header {
    background-color: #2ecc71;
}

.boxlr-chat-messages {
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 150px;
    overflow: scroll;

    background-color: #3498db;
}

.boxlr-chat-form {
    width: 100%;

    background-color: #34495e;
}

我想要的是消息<ul>填写除标题和表格以外的框，即使没有大量消息。当它填满时，我只想滚动聊天，同时将标题和表单“附加”到顶部和底部，以便它们始终可见。我“有点”能够做到这一点，但是我必须指定 height: 150px在 boxlr-chat-messages我不想这样做。另外，当滚动到底部时，您不能再滚动了，但滚动条只有 80%。

什么是最好的修复方法

1. 滚动条
2. 聊天布局

对不起，我找不到更好的标题来调用它了。我有一个 JSFiddle，它是 here如果这有帮助的话。

Answer 1

您可以通过将 overflow: scroll; 更改为 overflow: auto; 来修复奇怪的滚动行为。

至于聊天窗口的高度...为什么不直接将 .boxlr-chat-messages 的高度设置为您想要的任何高度？由于它具有固定高度和 overflow: auto;，因此不会影响页眉和页脚。