jquery-ui 选项卡内容溢出容器答案

【问题标题】：jquery-ui tabs content overflows containerjquery-ui 选项卡内容溢出容器
【发布时间】：2011-12-09 01:11:12
【问题描述】：

我遇到了 jquery-ui 选项卡内容超出浏览器窗口宽度的问题。在我的项目中，我有一个太宽的表格，但在提供的示例中，我只是制作了一个宽度为 2000 像素的 div 来说明问题。选项卡区域保持在 100% 宽度内（仅浏览器窗口宽度），而我的其余内容要大得多并且溢出包装的 jquery ui 选项卡区域。

我可以通过使用 overflow-y:auto 将内容包装在 div 中来解决这个问题，但我希望选项卡式区域会随着我的内容扩展，以便可以使用本机浏览器滚动条，而不是使用 div滚动条。

我测试了 jquery-ui 1.8.1、1.8.5 和 1.8.16。

有人对此有任何想法吗？

显然我无法发布图片，因为我没有足够的代表。

<!DOCTYPE html>
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>

<script>
$(function() {
    alert("TEST");
    $("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
    <ul>
        <li>
            <a href="#tabs-1">Work Request Information</a>
        </li>
        <li>
            <a href="#tabs-2">Assessments</a>
        </li>
        <li>
            <a href="#tabs-3">Work Items</a>
        </li>
        <li>
            <a href="#tabs-4">Documents</a>
        </li>
    </ul>
    <div id="tabs-1">
    </div>
    <div id="tabs-2">
        <div style="background-color:red;height:200px;width:2000px;"></div>
    </div>
    <div id="tabs-3">
    </div>
    <div id="tabs-4">
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

尝试为#tabs设置css宽度属性。

$('#tabs').css('width','2000px');

【讨论】：

这行得通，但是填充容器的内容是动态的，所以我永远不会知道大小会是多少。当然，除非我做一些 JS hacking 来找到容器中元素的最大宽度，但如果有一个干净的 CSS 修复，我希望避免这种情况。
查看 max-width 属性是否有效。对于 jQuery，它应该是 'max_width' ；它会转换它。
我认为这可能是我最接近解决方案的方法，或者删除容器边框本身。谢谢！

【解决方案2】：

我遇到了类似的问题。请原谅所有细节上的拙劣消隐，我正在从事的项目受保密协议的约束。

这是问题所在，选项卡覆盖了包含的 div：

通过调用治愈：

$('.tabs').css('height','auto');

最终结果：

希望这对某人有用。

【讨论】：

【解决方案3】：

来自 jQuery UI 样式表：

.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */

【讨论】：

我不确定你在这里得到什么。这条线似乎不能解决当前的问题。它也出现在FF中。