高度设定时，滚动条表现奇怪

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;，因此不会影响页眉和页脚。