jquery - 如何在内容中设置 jQuery 选项卡全屏加溢出滚动

Question

我正在尝试构建一个基于 jQuery 选项卡的响应式 Web。我希望此网站的页面完全全屏显示(100% 高度和宽度)，div.ui-tabs-nav 具有固定高度并能够滚动内容div.ui-tabs-panel 如果它不适合当前窗口。

这是我的布局的基本结构:

<div id="queue_tabs">
    <ul>
        <li><a href="queue_list.php?show=active">Active</a></li>
        <li><a href="#tabs-completed">Completed</a></li>
    </ul>
    <div id="tabs-active">...</div> <!-- This will be automatically generated by jQuery. -->
    <div id="tabs-completed">...</div>
</div>

请注意，虽然内容将通过 AJAX 加载，但我没有将其包含在以下 jsFiddle 中.

在我设置的CSS文件中:

#queue_tabs {
    height: 100%;
    width: 100%;
}

#queue_tabs .ui-tabs-panel {
    height: 90%; /* <--- This is what I don't want. */
    overflow: auto;
}

如您所见，为了展开 div.ui-tabs-panel，我必须将高度设置为相对于窗口高度 (90%) 的特定值，导致 div 仅在特定条件下完美调整。

有没有办法垂直覆盖所有区域并仍然允许出现溢出？

Answer 1

我认为您缺少以下部分:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

尝试添加这个。您需要确保没有任何内容会增加您的 body/html 的宽度，否则您将面临水平滚动条。