这个页面如何滚动(它不能正常工作)?

时间:2016-03-27 10:09:06

标签: javascript jquery html css html5

我尝试了很多不同的选项,但都没有。最接近我想要的是以下代码。

<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>的相对位置,但我只能按预期工作(输出顶部产生的消息),我可以使用滚动条。
我虽然让它成功但显然每个方面都有问题...... 有任何想法吗?谢谢!

1 个答案:

答案 0 :(得分:0)

这里是以下链接...我认为它将帮助您创建这种工作:
Sample code of chat application