如何设置textarea坐在底部并<ul>滚动

Question

我正在开发一个具有类似UI的WhatsApp的聊天应用程序。底部有一个textarea，消息保持在其顶部。

我目前的代码如下：

textarea {
  border: 0 none white;
  overflow: hidden;
  padding: 0;
  outline: none;
  background-color: #fff;
}

<div class="container" style="padding: 0 5px 0 5px;">
  <ul id="discussion" style="overflow-y: scroll;">
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
    <li>Placeholder</li>
  </ul>
  <div id="textentry" style="position:absolute; bottom:0px; width:99%;">
    <textarea id="message" style="width: 100%; height: 1em; background-color:lightgray;" rows="1"></textarea>
  </div>
</div>

一开始一切都很正常。每封邮件都<ul> <li>附加到<ul>。

但是当线条超过最初的textarea高度时，我将失去原来的风格。 <ul>未位于底部，而是位于页面内的<ul>和textarea滚动之上。 （请看下面的图片）

我想要的是在自己的位置滚动消息，而不会在<ul>上方或下方展开，并且function gcd (a, b) { if(b == 0){ return a; } return gcd(b, a%b); } function gcd_more_than_two_numbers (a) { var last = Math.max.apply(null, a); var first = Math.min.apply(null, a); return gcd(first, last); } console.log(gcd_more_than_two_numbers([9999,213123,9,15,27])); console.log(gcd_more_than_two_numbers([5,10,15,25])); 项目会滚动显示最新消息。

我该如何完成这项任务？

问候。

Answer 1

尝试像这样修改你的CSS：

textarea
{
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;

    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #fff;
}

Answer 2

要在文本区域之前设置ul完成，您可以将高度设置为ul。所以你也可以滚动ul并且页面不会放大

#discussion{
  height:600px;
}