这个页面如何滚动（它不能正常工作）？

Question

我尝试了许多不同的选项，但没有一个有效。最接近我想要的是下面的代码。

<div>
    <header class="w3-container w3-blue">
        <h1>My website</h1>
    </header>
    <input id="surname_input" type="text" class="w3-input" placeholder="Name (required)">
    <br/>
    <div class="w3-container" style="position: absolute; bottom: 43px; top: 117.4px; left: 0px; right: 0px; overflow-y: scroll;">
        <ul id="messages" style="position: absolute; bottom: 0px; z-index: -1;">
        </ul>
    </div>
    <br/>
</div>
<form id="chat_form" style="position: absolute; bottom: 0px; width: 100%">
    <textarea   id="chat_input"
                class="w3-input"
                autocomplete="off"
                placeholder="Enter text here..."
                onkeyup="auto_grow(this)"
                style="border-top: 1px solid #808080; height: 43px; overflow-y: hidden;"></textarea>

如果我将位置从<ul> 的绝对位置更改为相对位置，我可以让滚动工作，但它只是无法按预期工作（消息仅在输入顶部生成）。
我虽然我做到了，但显然各方面都存在问题...... 有任何想法吗？谢谢！

Answer 1

这是下面的链接...我认为它会帮助您创建此类作品：
Sample code of chat application