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

问题描述

这是我的项目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>

标签： javascriptjqueryhtmlcss

尝试在#messages 中设置： height : 70vh并在 # input-wrapper中设置position:relative

百分比是一种相对度量，它需要相对于父级的某个绝对设定值。例如，您可以为 body 添加一个绝对高度，然后它将能够弥补它的 70%：body { height: 500px }

阅读更多关于单位/绝对和相对长度

当您拥有 #input-wrapper { display: fixed }时，它不会再相对于其兄弟姐妹了，而是会粘在文档框架上。实际上，#input-wrapper 出现在文档中所有其他元素之上的一层，并且不能再与它们交互。

阅读有关定位的更多信息

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

问题描述

解决方案

推荐阅读