如何实现聊天面板列表滚动且底部悬浮指示器固定定位？

当前页面会整体滚动，期望实现以下布局效果：

• chatListContainer 和 inputBar 完全被包含在 chatPanel 内，inputBar 固定在页面底部
• chatList 区域可单独滚动，同时紫色的 floatingIndicator 固定在 chatListContainer 的左下角（位于 inputBar 上方）

初始代码（页面整体滚动） #

CSS #

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

.chatPanel {
    display: flex;
    flex-direction: column;
    background-color: #e0e0e0;
    height: 100%;
}

.chatListContainer {
    background-color: #d9faff;
    position: relative;
}

.inputBar {
    background-color: #d9ffdb;
    padding: 5px;
}

.chatMessage {
    background-color: #ffc1c1;
    margin: 10px;
    padding: 10px;
    font-size: 18px;
}

.floatingIndicator {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: purple;
}

.chatList {
    
}

HTML #

<!DOCTYPE html>
<html lang="en">
<body>

<div class="chatPanel">
    <div class="chatListContainer">
        <div class="chatList">
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
        </div>
        <div class="floatingIndicator">Text here</div>
    </div>
    <div class="inputBar">
        InputBar
    </div>
</div>

</body>
</html>

尝试添加 overflow: auto 后的问题 #

给 chatListContainer 添加 overflow: auto 后，inputBar 成功固定在底部，但 floatingIndicator 会随滚动内容移动，无法保持在 chatListContainer 的左下角位置。

对应的代码：

CSS #

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

.chatPanel {
    display: flex;
    flex-direction: column;
    background-color: #e0e0e0;
    height: 100%;
}

.chatListContainer {
    background-color: #d9faff;
    position: relative;
    overflow: auto;
}

.inputBar {
    background-color: #d9ffdb;
    padding: 5px;
}

.chatMessage {
    background-color: #ffc1c1;
    margin: 10px;
    padding: 10px;
    font-size: 18px;
}

.floatingIndicator {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: purple;
}

.chatList {

}

核心思路是将滚动容器从 chatListContainer 改为内部的 chatList，让 chatListContainer 保持相对定位且不滚动，这样 floatingIndicator 就能基于它固定位置，同时让 chatList 负责承载滚动的聊天内容。

修改后的完整代码 #

CSS #

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

.chatPanel {
    display: flex;
    flex-direction: column;
    background-color: #e0e0e0;
    height: 100%;
}

.chatListContainer {
    background-color: #d9faff;
    position: relative;
    /* 占据chatPanel中除inputBar外的全部空间 */
    flex: 1;
    /* 禁止容器自身滚动 */
    overflow: hidden;
}

.chatList {
    /* 成为滚动容器 */
    height: 100%;
    overflow-y: auto;
    /* 给底部指示器留出空间，避免遮挡最后一条消息 */
    padding-bottom: 30px;
}

.inputBar {
    background-color: #d9ffdb;
    padding: 5px;
    /* 固定高度，不被压缩 */
    flex-shrink: 0;
}

.chatMessage {
    background-color: #ffc1c1;
    margin: 10px;
    padding: 10px;
    font-size: 18px;
}

.floatingIndicator {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: purple;
    /* 确保指示器显示在聊天内容上方 */
    z-index: 1;
    padding: 5px 10px;
}

HTML #

<!DOCTYPE html>
<html lang="en">
<body>

<div class="chatPanel">
    <div class="chatListContainer">
        <div class="chatList">
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
            <div class="chatMessage">Chat message</div>
        </div>
        <div class="floatingIndicator">Text here</div>
    </div>
    <div class="inputBar">
        InputBar
    </div>
</div>

</body>
</html>

关键修改点说明 #

1. chatListContainer 配置：添加 flex: 1 使其填满父容器剩余空间，overflow: hidden 阻止容器自身滚动，确保它作为 floatingIndicator 的定位基准。
2. chatList 滚动逻辑：设置 height: 100% 和 overflow-y: auto，让聊天消息区域单独滚动；padding-bottom 避免最后一条消息被底部指示器遮挡。
3. inputBar 固定：添加 flex-shrink: 0，确保它不会被压缩，始终固定在底部。
4. floatingIndicator 层级：设置 z-index: 1，保证它显示在聊天内容上方，不会被消息覆盖。

内容的提问来源于stack exchange，提问作者Vlad Mashkautsan