从页面底部聊天消息空间

Question

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

Answer 1

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

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

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