html - 如何设置 textarea 位于底部并 <ul> 滚动

Question

我正在开发一个聊天应用程序，它具有类似 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;
}