我正在尝试使用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;”来解决这个问题，但是这会与两件事发生冲突：
一个简洁而短小的解决方案就可以了。
可以使用JavaScript，但最好使用（清爽的！）CSS-only的解决方案...
--敬礼，
Stefan
使用jQuery UI内置的功能，而不是使用自己的CSS。
var tabs = $("#tabs").tabs({heightStyle: "fill"});
来自API文档：
heightStyle
类型：字符串
默认值："content"
控制选项卡小部件和每个面板的高度。可能的值：
- "auto"：所有面板将设置为最高面板的高度。
- "fill"：根据选项卡父容器的高度扩展到可用高度。
- "content"：每个面板的高度仅与其内容一样高。
虽然您是正确的，纯CSS解决方案会非常好，但由于您已经使用JavaScript构建选项卡功能，因此最好使用您已经拥有的脚本的现有功能。
更新：
请参考http://jsfiddle.net/MhEEH/45/获取最简单的完整示例。请注意，它不需要任何CSSposition规则。
您需要使用http://benalman.com/projects/jquery-resize-plugin/（或类似插件）来监视父元素的大小变化。默认情况下，浏览器只会在窗口本身上触发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/
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/
希望能对你有所帮助，
祝好！
OP，
请查看此Fiddle。
父级元素#tabs设置了overflow: hidden;。除此之外，子元素：#tabs div[id*=tab]也设置了overflow:auto。这样可以确保父级元素设置边界，在选项卡中有溢出内容的情况下，滚动条的外观将由选项卡本身代理。
另外，对于那些不熟悉#tabs div[id*=tab]语法的人，通配符将匹配任何#tabs的子div，其id包含“tab”。这可以用多种方式实现，但我选择这个路线进行快速原型制作。
希望这能帮到你。
<p>标签中包裹，并在overflow:auto上进行了双重处理。 - couzzi<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;
}
我认为在基本样式修改中没有必要使用 JavaScript。最近，我将一个全屏单页面应用从使用 JavaScript 进行所有大小调整转换为使用纯 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;
}
希望能对你有所帮助！