javascript - jQuery 移动 ListView 溢出不起作用

Question

我有这个 HTML 页面。 (我使用jQuery mobile 1.3.1)

它应该类似于一个小聊天窗口。 我遇到的问题是，当你查看<li>时元素，这个<ul data-role="listview">元素应该是可滚动的。 但是，由于某种原因，它根本无法滚动，因为内容似乎隐藏在页脚 <div> 后面。 ，情况不应该是这样。

我有以下 HTML 标记:

(标签内没有换行符，这样大家可以更好地阅读)

 <div data-role="page" id="chat">
         <div data-role="header" data-position="fixed">
            <a href="#clickAndChat" data-role="button" data-inline="true" 
            data-transition="slide" data-direction="reverse" 
            data-icon="arrow-l" class="ui-icon-alt" data-theme="c">Back</a>
            <h1 id="headerPage1">Andi (Fake)    (50m)</h1>
        </div>
        <div class="ui-content" data-role="main" >                
            <ul data-role="listview" id="chatContent" style="overflow-y: scroll">
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
                <li>Satz A von Andi</li>
                <li>Satz B von mir</li>
                <li>Satz C von Andi</li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <input type="text" name="chatText" id="chatText" placeholder="Type here...">
            <button id="sendChatText" data-icon="check" class="ui-icon-alt"
             data-theme="c">Send</button>               
        </div>
    </div>

Answer 1

ul 实际上是可滚动的。您看不到滚动条的原因是元素尚未超过最大高度。当你限制ul高度并且不能再包含元素时，就会出现滚动条。

看看这个 fiddle .