智能在线客服系统源码GOFLY开发日志- 11. 聊天框的定位问题

前面介绍了一些golang方面遇到的问题，现在开始穿插总结一些前端遇到的小问题

底部固定输入框的实现

很多时候，我们的聊天界面需要有一个输入框，这个输入框一般情况下是固定在页面底部的，就像qq/微信。消息记录是在输入框的上面展示，当高度超出的时候出现滚动条，那么这样的效果用css怎么实现的呢？

这个css的绝对定位是可以实现的，把输入框div那块固定在底部，消息列表那块距离底部增加边距，但是这样会使输入框div那块脱离文档流，并且边距这种会破坏文档的高度，现在我使用一种新的方式实现。

例如下面这俩css

.chatRoomMessageBox{
    height: calc(100% - 100px);
    overflow-y: auto;
}
.chatRoomSendBox{
    height: 100px;
}

上面的是消息列表的样式，高度动态计算，超出高度滚动。
下面的是底部输入框的固定高度，这样就能实现页面的效果

后面还遇到了哪些问题和知识点将会继续进行总结。

在线客服系统在线客服源码 golang

本作品采用《CC 协议》，转载必须注明作者和本文链接

209 声望

自由职业独立开发者，唯一客服系统作者

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助