我尝试了很多不同的选项,但都没有。最接近我想要的是以下代码。
<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>
的相对位置,但我只能按预期工作(输出顶部产生的消息),我可以使用滚动条。
我虽然让它成功但显然每个方面都有问题......
有任何想法吗?谢谢!