时间戳

首页 > 解决方案 > 页面底部的聊天消息空间

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

问题描述

我正在尝试在聊天中的最后一条消息和页面底部之间创建一些空间，以便我的 textarea 不会与最后一条消息重叠。两个 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>

在此处输入图像描述

标签： htmlcssejs

解决方案

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

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

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

推荐阅读