javascript - 消息在输入容器下方滑动

Question

这是我的元素的示例布局，Hate AI .这个布局相当灵敏，有问题。如果你与 AI 进行了长时间的对话，消息会向下滑动，这很好并且在意料之中。但问题是它会滑到输入容器下面。我认为所有消息都应该只出现在输入容器上，而没有消息应该滑到它下面。接受帮助和答案。为这个答案尝试一些 CSS。

let messages = document.querySelector('#messages');
let typer = document.querySelector('#typer');
let textb = document.querySelector('#textb');
let msgsent = document.createElement('div');
let replymsg = document.createElement('div');
textb.addEventListener('click', function(){
    const transcript = typer.value;
    msgsent = document.createElement('div');
msgsent.setAttribute('id', 'sent');
msgsent.textContent = "This a message sent";
messages.appendChild(msgsent);
AIsend("This is a message recieved");
});
const AIsend = (finalText) => {
    replymsg = document.createElement('div');
    replymsg.setAttribute('id', 'recieved');
    replymsg.textContent= finalText;
    messages.appendChild(replymsg);
}

#sent{
    min-width: 10%;
    min-height: 10%;
    max-width: 30%;
    padding: 3px;
    float: right;
    display: block;
    clear: both;
    text-align: right;
    background-color: lightgray;
    border: 1px solid lightgray;
    border-bottom-right-radius: 0px;
    border-radius: 30px 0px 30px 30px;
    white-space: pre-wrap;
}
#messages{
    height: 70%;
    width: 100%;
    border: 0px solid black;
    position: relative;
    text-align: center;
    overflow: hidden;
}
#input-wrapper{
    position: fixed;
    bottom: 0%;
    width: 100%;
    height: auto;
    text-align: center;
    border: 0px solid black;
    overflow: hidden;
  
}
#recieved{
    min-width: 150px;
    min-height: 40px;
    float: left;
    display: block;
    clear: both;
    background-color: blue;
    border: 1px solid blue;
    color: white;
    border-bottom-left-radius: 0px;
    border-radius: 0px 30px 30px 30px;
}
#typer{
    white-space: pre-wrap;
    height: 50px;
    width: 300px;
    border: 1px solid grey;
    border-radius: 30px;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Product Sans', sans-serif;
}
#talkb, #textb{
    position: relative;    
width: 15vh;
height:15vh;
border-radius:10px;
background-color: #2A4494;
text-align: center;
color:#44CFCB;
font-family: 'Product Sans', sans-serif;
font-weight: bold;
font-size: 5vh;
align-content: center;
}

        <div id="messages"></div>
        <div id="input-wrapper">
            <input type="text" id="typer"><br />
            <button id="textb"><i class="fas fa-paper-plane" aria-hidden="true"></i></button>
        </div>
            <script src="https://kit.fontawesome.com/9e07794f8f.js"></script>

Answer 1

Flexbox可以很好地用于这种布局。

body,
html {
  padding: 0;
  margin: 0;
}

.main-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.messages {
  background: cornflowerblue;
  overflow-y: scroll;
}

.input-wrapper {
  padding: 30px;
  background: cadetblue;
}

.sent {
  background: cyan;
  padding: 30px;
}

.sent+.sent {
  margin-top: 20px;
}

input {
  display: block;
}

<div class="main-wrapper">
  <div class="messages">
    <div class="sent">test</div>
    <div class="sent">test</div>
    <div class="sent">test</div>
    <div class="sent">test</div>
    <div class="sent">test</div>
    <div class="sent">test</div>
  </div>
  <div class="input-wrapper">
    <input type="text">
    <button>Send</button>
    <button>Audio</button>
  </div>
</div>

甚至grid

body,
html {
  padding: 0;
  margin: 0;
}

.main-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}

.messages {
  background: cornflowerblue;
  overflow-y: scroll;
}

.input-wrapper {
  padding: 30px;
  background: cadetblue;
}

.sent {
  background: cyan;
  padding: 30px;
}

.sent+.sent {
  margin-top: 20px;
}

input {
  display: block;
}

<div class="main-wrapper">
  <div class="messages">
    <div class="sent">test</div>
    <div class="sent">test</div>
    <div class="sent">test</div>
    <div class="sent">test</div>
    <div class="sent">test</div>
    <div class="sent">test</div>
  </div>
  <div class="input-wrapper">
    <input type="text">
    <button>Send</button>
    <button>Audio</button>
  </div>
</div>

每次发送新消息时，您都必须将 .messages 容器滚动到底部。

注意:由于 ios safari 的问题，如果可能的话，我倾向于避免将 vh 用于这样的布局。