Сообщения скользят ниже контейнера ввода

Question

Это примерный макет моего проекта, Ненависть 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>

Или даже сетка

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 до конца каждый раз, когда новое сообщение отправляется.

Примечание: Я склоненизбегайте использования vh для таких макетов, если это возможно, из-за проблем с ios safari.

Answer 2

Попробуйте установить: высота: 70vh в # сообщениях и положение: относительно в # input-wrapper

Процент является относительным измерением, он должен быть относительно некоторого абсолютного установленного значения родителя. Например, вы можете добавить абсолютную высоту к телу, и тогда она сможет составить 70% от этого: body {height: 500px}

Подробнее о блоках /Абсолютная и относительная длина

Поскольку у вас есть # input-wrapper {display: fixed} , он больше не будет оставаться относительно своих братьев и сестер, вместо этого он станет липким к фрейму документа,Фактически # input-wrapper отображается на слое выше всех других элементов документа и больше не может с ними взаимодействовать.

Подробнее о позиционировании