html - 将 div 粘贴到父聊天窗口的底部

Question

我试图让聊天输入 (chatArea) float 在蓝色 div 容器的底部，并在滚动聊天时让它固定在那里。

感谢任何帮助，谢谢。

这是我现在拥有的 fiddle : https://jsfiddle.net/oyja38t5/

html:

<div class="chatContainer">
    <div id="messages">
        <p>test</p>
        <p>test</p>
        <p>test</p>
       <p>test</p>
    </div>
    <div class="chatArea">
        <form action="" id="cSubmitButton">
            <input id="chatInput" autocomplete="off" placeholder="Type your guess here!"/>
        </form>
    </div>
</div>

CSS:

.chatContainer {
    font-size: 18px;
    position: relative;
    background-color: #90C3D4;
    width: 300px;
    height: 600px;
    overflow-y: scroll;
    float: right;
    display: inline-block;
    margin-left: 8px;
    border-radius: 2px;
}

.chatContainer p {
    padding: 3px;
    margin: 0;
} 

.chatArea {
    position: sticky;
    bottom: 0;
    width: 100%;
    display: inline-block;
}

#chatInput {
    width: 100%;
    padding: 6px 12px;
}

#cSubmitButton {
    width: 80%;
    display: inline-block;
}

Answer 1

我想这就是你要找的

.chatContainer {
    font-size: 18px;
    position: relative;
    background-color: #90C3D4;
    width: 300px;
    height: 600px;
    overflow-y: scroll;
    float: right;
    display: inline-block;
    margin-left: 8px;
    border-radius: 2px;
}

.chatContainer p {
    padding: 3px;
    margin: 0;
} 

.chatArea {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: inline-block;
    margin-top: 100%;
}

#chatInput {

    width: 100%;
    padding: 6px 12px;
    
}

#cSubmitButton {
    width: 80%;
    display: inline-block;
}

<div class="chatContainer">
    <div id="messages">
        <p>test</p>
        <p>test</p>
        <p>test</p>
       <p>test</p>
    </div>
    <div class="chatArea">
        <form action="" id="cSubmitButton">
            <input id="chatInput" autocomplete="off" placeholder="Type your guess here!"/>
        </form>
    </div>
</div>