Html 我怎样才能一直在视图中与sticky footer聊天？

我想实现一个聊天功能，它可以在屏幕上留下一个粘糊糊的页脚，但我真的被卡住了。以下是我想要的：

或者，至少，我的聊天室的底部位于内容或屏幕的底部。 我使用的是Bootstrap4.1

我试着给你举一个我在这里的例子：

聊天会像我想要的那样贴在顶部，但由于导航栏的缘故，它不会贴在底部

最好全屏查看此代码段

这是我不久前做的东西，我想这是你想要的；这是大量的代码，主要是因为标记，因为它是一个完整的组件，但也许它可以帮助您走上正确的道路

我使用Flexbox和Bootstrap4来调整一切，并使用CSS进行一些计算，但主要思想是创建容器，每个容器独立处理其内容和溢出。您需要定义一个高度，以便零部件在不被推动的情况下保持在位。让我知道你是否打算这样做；也许我们可以在这个基础上工作

信息部分{ 最小高度：继承； } 消息部分>div{ 最小高度：继承； } .邮件容器{ 显示器：flex； 最小高度：继承； 填充底部：40px； 右边填充：40px； } .邮件容器.联系人框{ 宽度：340px； } .邮件容器.联系人框.联系人列表{ 溢出y：自动； 高度：calc100vh-100px； } .邮件容器.联系人框.联系人列表.联系人{ 最小高度：96px； 边框顶部：0.5px实心EF； 边框底部：0.5px实心EF； 填充：20px； 显示器：flex； 对齐项目：居中； 位置：相对位置； 颜色：3636； 光标：指针； } .messages容器。联系人框。联系人列表。联系人。新建消息{ 背景色：f3f6f9； } .messages容器。联系人框。联系人列表。联系人：悬停{ 背景色：f3f6f9； } .messages容器。联系人框。联系人列表。联系人：活动{ 背景色：rgba249,92,144,0.096； } .消息容器.联系人框.联系人列表.联系人.化身{ 右边距：15px； } .messages容器。联系人框。联系人列表。联系人。联系人信息{ 最大宽度：200px； } .messages容器.联系人框.联系人列表.联系人.联系人信息p{ 字体大小：12px； 最大高度：35px； 溢出：隐藏； 保证金：0； 用户选择：无； } .messages容器。联系人框。联系人列表。联系人。计时器{ 位置：绝对位置； 右：15px； 顶部：10px； } .消息容器.联系人框.联系人列表.联系人.计时器范围{ 字体大小：11px； 用户选择：无； } .messages容器。消息框{ 宽度：calc100%-340px； } .消息容器.消息框.对话面板{ 位置：相对位置； 高度：calc100vh-100px； 右边框：1px实心EF； } .消息容器.消息框.对话{ 左边框：1px实心EF； 高度：calc100vh-170px； 填充：16px 40px； 溢出y：自动； } .消息容器.消息框.对话.消息卡{ 填充：15px； 边界半径：10px； 显示器：flex； 边缘底部：20px； 宽度：适合的内容； } .消息容器.消息框.对话.消息卡：最后一个孩子{ 页边距底部：0； } .消息容器.消息框.对话.消息卡.化身{ 自对准：柔性端； } .消息容器.消息框.对话.消息卡.消息文本{ 字体大小：14px； } .messages容器。消息框。对话。消息卡。消息文本：最后一个孩子{ 页边距底部：0； } .消息容器.消息框.对话.消息卡.用户消息{ 背景色：f3f6f9； 弯曲方向：行反向； 左边距：自动； } .消息容器.消息框.对话.消息卡.用户消息.化身{ 左边距：15px； } .消息容器.消息框.对话.消息卡.用户消息.消息文本{ 文本对齐：右对齐； } .消息容器.消息框.对话.消息卡.联系信息{ 背景色：rgba249,92,144,0.06； } .消息容器.消息框.对话.消息卡.联系人消息.化身{ 右边距：15px； } .消息容器.消息框.书写面板{ 高度：70像素； 背景色：f3f6f9； 填充：15px0； 宽度：100%； 位置：绝对位置； 底部：0； 显示器：flex； } .消息容器.消息框.写入面板按钮{ 高度：30px； 宽度：30px； 背景：无； 边界：无； 大纲：无； 光标：指针； 填充：0； 过渡：均为0.2s； } .消息容器.消息框.写入面板按钮：活动{ 转换：translateY2px； } .messages容器.消息框.写入面板按钮：悬停svg{ 不透明度：1！重要； } .messages容器.消息框.写入面板按钮：悬停svg路径{ 填充：de008f； 过渡：均为0.2s； } .消息容器.消息框.书写面板文本区域{ 宽度：60%； 填充：1px0； 左侧填充：10px； 右边填充：10px； 边框：2倍实心透明； 大纲：无； 调整大小：无； 过渡：均为0.2s； } .messages容器.消息框.书写面板文本区域：焦点{ 边框颜色：de008f； } .messages容器.messages头{ 高度：70像素； 填充：15px； 显示器：flex； 证明内容：之间的空间； 对齐项目：居中； } .messages容器.messages-header.contacts-header{ 左边框：0px实心EF； 边框顶部：2个实心EF； 边框底部：1px实心EF； } .messages容器.messages-header.contacts-header按钮{ 宽度：25px； 边界：无； 边界半径：5px； 盒影：无； 背景：url../assets/img/msg/new-msg.svg不重复； 背景大小：90%； 背景职位：50%； 光标：指针； 左边距：5px； 过渡：均为0.2s； } .messages容器.messages-header.contacts-header按钮：活动{ 背景色：透明； 盒影：无！重要； 边界：无； 变换：缩放0.8,0.8； } .messages容器.messages-header.contacts-header.input group.input group文本{ 背景：无； 边框颜色：透明； } .messages容器.messages-header.contacts-header.input组.form控件{ 边框颜色：透明； 盒影：无； } .messages容器.messages-header.conversation-header{ 左边框：1px实心EF； 边框顶部：2个实心EF； 边框底部：1px实心EF； 右边框：1px实心EF； } .messages容器.messages-header.conversation-header.message标题h5{ 字号：700； 保证金：0； } .messages容器.messages-header.conversation-header.message title.status-info.online{ 颜色：04d2af； } .messages容器.messages-header.conversation-header.message title.status-info.offline{ 颜色：FF1E； } .messages容器.messages-header.conversation-header.call图标， .messages容器.messages-header.conversation-header.菜单图标{ 宽度：35px； 高度：35px； 背景：无； 边界：无； 光标：指针； 大纲：无； 过渡：均为0.2s； } .messages容器.messages-header.conversation-header.call图标：hover.a， .messages容器.messages-header.conversation-header.菜单图标：悬停.a{ 填充：de008f； 过渡：均为0.2s； } .messages容器.messages-header.conversation-header.call图标：活动， .messages容器.messages-header.conversation-header.菜单图标：活动{ 变换：缩放0.8,0.8； } .a{填写：363636；} 格兰特·马歇尔 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 杰西卡·迈尔斯 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 娜塔莎·甘博 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 瓦妮莎·瑞安 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 卡罗尔·凯利 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 朱莉娅·彼得森 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 玛丽莎·凯恩 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 盖尔·盖恩斯 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 克里·哈德森 我的同僚们都是精英。嗨，多尔·阿勒奎姆·康莫迪·阿勒杜

15分钟 .a{填写：363636；} 杰西卡·迈尔斯 在线 的 .a{填写：363636；}

Lorem ipsum door sit amet concertetur，adipising elit。暂时性尊严智商

Lorem ipsum door sit amet concertetur，adipising elit

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

Lorem ipsum door sit amet concertetur，adipising elit。时间上的尊严。在最短的时间内，由于错误的原因，通常情况下都会发生

.a{opacity:1；}.b{fill:6161；}

---

请发布您正在使用的代码示例。您可以使用常规CSS实现这一点，而不需要使用flexbox。引导程序已经为您设置了粘性页脚组件。是的，我有粘性的页脚，问题只是为了聊天。如果内容高于屏幕，则无法保留在屏幕底部请创建一个代码片段，您可以与问题共享，这是一个复制/粘贴代码以共享的简单位置。很乐意帮助解决问题，但还需要更多的东西。我在这里做了一些类似的事情：也许这就是你要找的，让我知道我省略了一些样式，只是想显示一般结构实际上一个非现场代码沙盒是不够的；如果你有一个关于代码的问题，而不是你所希望的那样，那么问题本身就需要包括，而不仅仅是问题中的链接。谢谢IvanS95，几乎就是这样，但不完全是这样。我会努力用它来实现我想要的need@LaSmala当然，根据您共享的内容，我认为您仍然需要定义聊天容器的高度，这样它就不会比屏幕大，比如max height:calc100vh-100px，以补偿页眉和页脚占用的空间