将div停留在父聊天窗口的底部

Question

我正在尝试使聊天输入（chatArea）浮动在蓝色div容器的底部，并在滚动聊天时使其停留在该位置。

感谢您的帮助，谢谢。

这是我现在所拥有的东西： 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>