jQuery选项卡：面板覆盖100%高度的选项卡

我试图使用jqueryui的tabs小部件，将面板内容扩展到整个可用空间

以下是我到目前为止得到的一个简化版本：

当我使用以下CSS时，您会看到#tab-1的绿色面板内容只覆盖了整个页面，而不仅仅是面板空间：

 #tab-1 {
    background: green;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

我可以使用“top:27px；”来解决这个问题，但这会与两件事发生冲突：

如果我改变标签“主题”，高度（27px）可能会改变

如果我有很多标签，我会在第一行下面有第二行。因此，我的面板内容将覆盖第二行

一个干净、简短的解决方案就可以了

JavaScript是可以接受的，而（干净的！）CSS唯一的解决方案更可取

--问候,

---

Stefan这就是你想要的吗

---

我只是试着用这个：

#tab-1 {
    background: green;
    position: relative;
    height:100%;
}

在JSFIDLE中，它工作得很好。不确定它将如何出现在您的页面上

---

我尝试将选项卡放入选项卡容器中，并使用以下样式

#tab-container {position:relative; min-height:100%;}

这似乎奏效了：

作品

检查

父级

#选项卡

有

溢出：隐藏。
除了子项：
#tabs div[id*=tab]
具有
溢出：自动设置。这确保了父级将设置边界，如果选项卡中的内容溢出，滚动条外观将由选项卡本身委派

另外，对于那些不熟悉语法的人来说，这个通配符将匹配
#tabs div[id*=tab]
，它的
id
包含“tab”的
#tabs
的任何子
div
。这可以通过多种方式实现，但我选择了这条路线进行快速原型设计

希望这有帮助
 使用jQuery UI的内置功能，而不是使用自己的CSS

var tabs = $("#tabs").tabs({heightStyle: "fill"});

从：

高度样式

类型：字符串

默认值：“内容”

控制选项卡小部件和每个面板的高度。可能值：


“自动”：所有面板将设置为最高面板的高度
“填充”：根据选项卡的父级高度展开到可用高度。
“内容”：每个面板的高度仅与其内容相同

尽管您认为一个简单的CSS解决方案非常好是对的，但由于您正在使用JavaScript构建选项卡功能，因此最好使用您已有的脚本的现有功能


更新：


有关最简单的完整示例，请参见。注意，它不需要任何CSS
position
规则

您需要使用（或类似）来观察父对象的大小更改。默认情况下，浏览器仅在窗口本身上触发事件，但该插件将对该事件的支持扩展到正在调整大小的任意元素

我认为没有必要在这里使用javascript进行基本样式修改。我最近转换了一个单页全屏风格的应用程序，通过定位和其他方式将其从javascript调整为纯CSS

现在找到一个解决方案——试试这个


我认为没有必要在绿框元素上使用绝对定位，因为父元素填充了空间，现在需要做的就是
height:100%
，它应该填充剩余的空间

编辑

此版本中的内容不滚动似乎存在问题。正在努力找到解决方法。我觉得jqueryui向
#tab-1
div添加了一系列样式和内容，这可能会导致您的问题。可能值得尝试重新设置
#tab-1的样式，看看这会给您带来什么。
下面是我的CSS解决方案的链接，希望对您有用


有人提到了Coda滑块，这也是一个很好的解决方案，作为替代方案，我可能建议使用codrops的弹性内容滑块


希望有帮助

干杯
这个怎么样。。。如果内容溢出，您将看到滚动条完全可见


希望这有帮助
 最简单的解决方案，
CSS中的两个更改和问题解决，
#tabs{height:100%；}

和
#tab-1{top:45px；}

这将完成：）更新
我在#tab-1 id中添加了一个top position值，以将其推到选项卡本身下方

见：

以下是相关的CSS：

#tab-1 {
    background: green;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}

希望有帮助
 不幸的是，这会导致垂直滚动，并使面板内容超过屏幕高度。一开始就有这种方法，但对我来说不起作用。。。不过还是要谢谢你尝试一下。看起来不错。。。我会在真实的环境中尝试一下。。。等一下！嗯，对不起，和比利莫特的问题一样。面板内容在屏幕高度下方继续显示。当您为html/body启用滚动条和/或删除“溢出：隐藏；”时，这将立即可见。看看对你的方法的这种修改：——你还有别的想法吗？（Thx到目前为止）我添加了溢出：隐藏到#选项卡现在看起来很好=）再次检查它。我添加了更多内容。而且。。。哦，奇怪：有些部件隐藏在屏幕底部。我的上帝：我甚至没有一个滚动条可以向下滚动！！！--那不是我想要的；-）--请看：PS：这就是为什么我讨厌CSS。。。我总是“尝试”一些事情，而不是仅仅知道如何去做。。。。并且知道它会起作用！抱歉，Pete，与其他两个答案的问题相同：面板内容（选项卡容器）继续在屏幕下方不可见。刚刚删除了“溢出：隐藏”=>-所以你可以看到，我的意思。啊，我想知道是否有某种溢出隐藏属性阻止了它的显示。您需要做的是使用jquery调整它的大小-找到窗口的高度，然后找到选项卡列表，并使选项卡容器的高度不同（unles）
#tab-1 {
    background: green;
    height: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tab-list {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1, #tab-2 {
    background: green;
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
}

<div id="tab-1" class="customPanel">This content shall: fill up the entire space (left to right) until  the bottom of the page. But it shall -NOT- cover the tabs!</div>

    html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
     overflow:auto;
}

 #tabs .customPanel {
    background: green;

}

#tab-1 {
    background: green;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}