0

在一些 jQuery 移动选项卡中，我有需要滚动条的内容。

控制它们的导航栏在这个 fiddle中的标题中。

我尝试height: 100%; overflow: auto;在所有级别的选项卡内容上进行设置，但滚动条仍然应用于整个页面。

溢出的滚动条如何仅自适应地应用于选项卡式内容？

jsFiddle

HTML

<div data-role="page" id="mainPage">
    <div data-role="tabs" id="tabs">
        <div data-role="header" style="overflow:hidden;">
            <h1>I'm a header</h1>
            <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" class="ui-btn-active">One</a></li>
                    <li><a href="#two">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </div>
        </div>
        <div id="one" class="ui-body-d ui-content tabContent">
            <h1>First tab contents</h1>
        </div>
        <div id="two">
            <ul data-role="listview" data-inset="true">
                <li><a href="#">Acura</a></li>
                <li><a href="#">Audi</a></li>
                <li><a href="#">BMW</a></li>
                <li><a href="#">Cadillac</a></li>
                <li><a href="#">Ferrari</a></li>
            </ul>
        </div>
    </div>
</div>

JS

$(document).ready(function() {
    var $one = $('#one')
    for(var i=0; i<1000; i++){
        $one.append('<br/>content')
    }

})

CSS

body{
    overflow:hidden;
}
.tabContent{
    height:100%;
    overflow:auto;
}
4

2 回答 2

1

你需要这样的东西吗？http://jsfiddle.net/VjYq9/3/

#one{
    height:330px;
    overflow-y:scroll;
}

更新：你去http://jsfiddle.net/VjYq9/5/

$one.height($(window).height()-120); //note that -120 must be the size of the header, so it is the window size minus the size of the header so "#one" would fit the screen!
于 2014-06-22T05:14:25.480 回答
0

有一个仅 CSS 的解决方案，@user1382306 请参见下文：

.max-height-occupied {
    position: absolute;
    top: 88px; /*your header height*/
    right: 0;
    bottom: 44px; /*your footer height */
    left: 0;
}

而在你的目标内容 div 只是这样说：

<div data-role="content" data-theme="b" class="max-height-occupied">
于 2018-11-19T01:54:29.610 回答