html - 页面底部的聊天消息空间

标签 html css ejs

我试图在聊天中的最后一条消息和页面底部之间留出一些空间,这样我的文本区域就不会与最后一条消息重叠。两个 div 都在同一个父容器中。这里有什么最佳实践想法吗?

<div class="prevChatBox">
    <!-- previous chats boxes -->
    <ul id="chats"></ul>
</div>

<div class="chatDiv">
    <textarea id="chatInput" autocomplete="on" placeholder="Type your message here!"></textarea>
    <button type="button" id="messageSubmit">
        Submit
    </button>
</div>

enter image description here

最佳答案

如果两个 div 在同一个父级中,那么我假设您在 chatDiv 中使用了 position: absolutebottom: FOOpx现在。 在这种情况下,您可以将 padding-bottom: BARpx 设置为您的 prevChatBox

如果您不打算在这里使用 position: absolute,您应该再次检查,因为在正常情况下 chatDiv 不会与您的 prevChatbox 重叠

您可以使用 stackoverflow 的代码片段功能来发布您的问题吗

关于html - 页面底部的聊天消息空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58314611/

相关文章:

html - 之前找不到答案..与 css 定位苦苦挣扎

html - 我需要所有这些包裹吗?

javascript - express.js ejs 不渲染我的 html

javascript - 单击时照片滑动关闭

javascript - Angular js中同一 Controller 的两个实例

c# - 如何在 WebPart 中模仿 Response.Write ("string")

css - 经 W3C 验证的 HTML5(适用于 Chrome、Firefox、Safari) IE8 黑屏

javascript - 在平滑传输和颜色变化中调整拨动开关

javascript - 'temp' 中的未知列 'field list'

javascript - Node.js 导出函数未返回正确数据