このページはどのようにスクロールできますか（正しく動作しません）？

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