jQuery选项卡：面板覆盖100％高度的选项卡
我正在尝试使用具有面板内容的jQuery-UI的选项卡小部件来扩展到整个可用空间。
这是我到目前为止的简化版本： http ： //jsfiddle.net/MhEEH/3/
当我使用以下CSS时，您会看到＃tab-1的绿色面板内容只覆盖整个页面，而不仅仅是面板空间：
#tab-1 { background: green; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 我可以使用“top：27px;” 解决这个问题，但这会碰到两件事：
- 如果我更改选项卡“主题”，高度（27px）可能会更改
- 如果我有很多标签，我会在第一行下面有第二行。 所以我的小组内容将涵盖第二行……
干净简洁的解决方案会很好。
JavaScript是可以接受的，而（干净！）仅CSS的解决方案更可取……
– 问候，
斯特凡
而不是使用自己的CSS，使用jQuery UI的内置function。
var tabs = $("#tabs").tabs({heightStyle: "fill"});
从API文档 ：
heightStyle
类型：字符串
默认值：“内容”
控制选项卡小部件和每个面板的高度。 可能的值：
- “auto”：所有面板都将设置为最高面板的高度。
- “填充”：根据选项卡的父高度扩展到可用高度。
- “内容”：每个面板只会与其内容一样高。
虽然你是正确的，但纯粹的CSS解决方案会非常好，因为无论如何都要使用JavaScript来构建选项卡function，最好使用现有脚本的现有function。
更新 ：
-
有关最简单的完整示例，请参见http://jsfiddle.net/MhEEH/45/ 。 请注意，它不需要任何CSS
position规则。 -
您需要使用http://benalman.com/projects/jquery-resize-plugin/ （或类似）来查看父级的大小更改。 默认情况下，浏览器仅在窗口本身触发
resize事件 ，但此插件将对该事件的支持扩展到要resize的任意元素。
我尝试将标签放入标签容器中，并使用以下样式
#tab-container {position:relative; min-height:100%;}
它似乎工作：
这就是你要追求的吗？
html, body { height: 100%; } #tabs { position: absolute; top: 0; bottom:0; left: 0; right: 0; } #tab-1 { background: green; height: 100%; }
我只是试着用这个：
#tab-1 { background: green; position: relative; height:100%; }
并在jsfiddle它工作正常。 不确定它将如何出现在您的页面上http://jsfiddle.net/MhEEH/7/
OP，
检查这个小提琴 。
父#tabs overflow: hidden; 。 除了孩子们： #tabs div[id*=tab]有overflow:auto设置。 这可确保父级将设置边界，并且如果选项卡中存在溢出内容，则选项卡本身将委派滚动条外观。
另外，对于那些不熟悉语法#tabs div[id*=tab] ，这个通配符将匹配id “tab”的#tabs的任何子div 。 这可以通过多种方式实现，但我选择了这条路线进行快速原型设计。
希望这可以帮助。
最简单的解决方案，CSS的两个变化，问题解决了，＃ #tabs{height:100%;}
和#tab-1{top:45px;}
这将做:)更新小提琴
以下是我的CSS解决方案的链接，希望对您有用
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; }
有人提到了Coda滑块这也是一个很好的解决方案，作为替代方案，我可能会建议这个弹性内容滑块来自codrops
http://tympanus.net/codrops/2013/02/26/elastic-content-slider/
希望能帮助到你，
干杯
怎么样……如果内容溢出，你会看到滚动条完全可见
This content shall: fill up the entire space (left to right) until the bottom of the page. But it shall -NOT- cover the tabs!
并为此提供课堂风格
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; }
希望这可以帮助！！！
我认为不需要在这里使用javascript进行基本的样式修改。 我最近转换了一个单页全屏风格的应用程序，从使用定位和东西完成所有重新resize的CSS到纯CSS。
现在进入解决方案 – 试试这个。
#tab-1 { background: green; height: 100%; }
我没有看到在绿色框元素上使用绝对定位的需要，因为父级填充了空间，现在你需要做的就是height: 100%并且它应该填满剩余的空间。
编辑
在此版本中，内容不滚动似乎存在问题。 苦苦寻找解决方案。 我觉得jQuery UI正在向#tab-1 div添加一堆样式和内容，这可能会导致你的问题。 可能值得尝试重置#tab-1的样式并查看离开的内容。
我在＃tab-1 id中添加了一个顶部位置值，将其推到标签本身下方。
请参阅： http ： //jsfiddle.net/MhEEH/40/
这是相关的CSS：
#tab-1 { background: green; position: absolute; top: 50px; bottom: 0; left: 0; right: 0; }
希望能帮助到你！