如何设置文本区域位于底部并 <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> 项目以显示最新消息。

我怎样才能完成这个任务？

此致。

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;
}

如何设置文本区域位于底部并 <ul> 滚动

How to set textarea sit at the bottom and <ul> scroll

html

css

textarea