基于Bootstrap 4实现类Google Bard全屏聊天容器问题求助

直接用 Bootstrap 4 的 flex 布局就能搞定你的需求，不用复杂自定义样式，代码示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天机器人</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <style>
        /* 确保根元素和body占满屏幕高度 */
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden; /* 避免页面整体滚动 */
        }
    </style>
</head>
<body>
    <!-- 外层全屏容器，用flex垂直布局 -->
    <div class="h-100 d-flex flex-column container-fluid p-0">
        <!-- 对话区域：自动占满剩余空间，超出显示滚动条 -->
        <div class="flex-grow-1 overflow-auto p-3">
            <!-- 示例对话内容 -->
            <div class="mb-3">
                <div class="bg-light rounded p-2">你好，我是聊天机器人！</div>
            </div>
            <div class="mb-3 text-right">
                <div class="bg-primary text-white rounded p-2">请问怎么实现全屏聊天布局？</div>
            </div>
            <!-- 可重复添加对话测试滚动效果 -->
        </div>
        <!-- 输入框区域：固定在底部，宽度和容器一致 -->
        <div class="border-top p-3 bg-white">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="输入消息...">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button">发送</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

关键要点说明 #

• 全屏容器实现：给html和body设置height: 100%，外层容器用h-100（Bootstrap 内置类，设置高度100%），搭配d-flex flex-column设置垂直方向的 flex 布局，确保容器占满屏幕高度。
• 对话区域滚动：对话容器用flex-grow-1让它自动占满容器剩余高度，加上overflow-auto，内容超出时自动显示滚动条，不会影响输入框位置。
• 输入框固定底部：输入框区域作为 flex 容器的最后一个子元素，无需用fixed-bottom，flex 布局会自动将其推到容器底部，宽度自然继承外层容器，完美匹配容器宽度。如果需要调整输入框的左右边距，修改输入框区域的p-3类（Bootstrap 内边距类）即可。

对应解决你的问题 #

1. 容器全屏：通过html, body {height:100%} + 外层容器h-100确保容器占满屏幕高度，container-fluid p-0让容器贴合屏幕边缘（需要留边距可去掉p-0）。
2. 输入框贴合底部且宽度匹配：利用 flex 布局的特性，输入框区域基于父容器定位，自动对齐底部，宽度和容器完全匹配，避免了fixed-bottom基于视口定位导致的全屏宽度问题。

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