Question

我正在尝试使用具有面板内容的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;”解决这个问题，但这会与两件事发生冲突：

如果我更改标签“theme”，则高度（27px）可能会更改
如果我有很多标签，我会在第一行下面排第二行。所以我的小组内容将覆盖第二行...

干净＆amp;简短的解决方案就没问题了。

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

- 问候，

的Stefan

Answer 1

使用jQuery UI的内置功能，而不是使用自己的CSS。

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

来自API documentation：

<强> heightStyle

类型：字符串

默认：“内容”

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


“auto”：所有面板都将设置为最高面板的高度。

“填充”：根据标签的父级高度展开到可用的高度。

“content”：每个面板的高度与其内容一样高。

虽然你是对的，但纯粹的CSS解决方案会非常好，因为你使用JavaScript 无论如何来构建标签功能，最好使用你已经完成的脚本的现有功能有

<强>更新：

有关最简单的完整示例，请参阅http://jsfiddle.net/MhEEH/45/。请注意，它不需要任何CSS position规则。
您需要使用http://benalman.com/projects/jquery-resize-plugin/（或类似内容）来观看父级的大小更改。默认情况下，浏览器仅在窗口上激活resize event，但此插件将对该事件的支持扩展到要调整大小的任意元素。

Answer 2

我尝试将标签放入标签容器中并使用以下样式

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

似乎有效：

http://jsfiddle.net/MhEEH/8/

Answer 3

这就是你要追求的吗？

http://jsfiddle.net/MhEEH/5/

html, body {
    height: 100%;   
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1 {
    background: green;
    height: 100%;
}

Answer 4

我只是试着用这个：

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

并且在jsfiddle中它工作正常。不确定它在你的页面上会是怎样的 http://jsfiddle.net/MhEEH/7/

Answer 5

OP，

检查this Fiddle。

父#tabs有overflow: hidden;。除了孩子：#tabs div[id*=tab]设置了overflow:auto。这可确保父级将设置边界，如果选项卡中存在溢出的内容，则选项卡本身将委派滚动条外观。

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

希望这会有所帮助。

Answer 6

以下是我的CSS解决方案的链接，希望对您有用

http://jsfiddle.net/MhEEH/17/

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/

希望它有所帮助，

干杯

Answer 7

最简单的解决方案， CSS中的两个更改，问题已解决，#tabs{height:100%;}

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

这样做:)已更新fiddle

Answer 8

这个怎么样......如果内容溢出，你会看到滚动条完全可见

http://jsfiddle.net/uHk5f/

<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;

}

希望这有帮助!!!

Answer 9

我认为不需要在这里使用javascript进行基本的样式修改。我最近转换了一个单页全屏风格的应用程序，从使用定位和东西的所有重新调整大小到纯CSS。

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

http://jsfiddle.net/MhEEH/16/

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

我认为不需要在绿色框元素上使用绝对定位，因为父级填充了空间，您现在需要做的只是height: 100%并且它应该填满剩余的空间。

修改

此版本中内容不滚动似乎存在问题。苦苦寻找解决方案。我觉得jQuery UI正在向#tab-1 div添加一堆样式和内容，这可能会导致你的问题。可能值得尝试重置#tab-1的样式并查看离开的内容。

Answer 10

我在＃tab-1 id中添加了一个顶部位置值，将其推到标签本身下方。

请参阅：http://jsfiddle.net/MhEEH/40/

以下是相关的CSS：

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

希望它有所帮助！

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

10 个答案: