12

我正在尝试使用具有面板内容的 jQuery-UI 的选项卡小部件来扩展到整个可用空间。

这是我到目前为止所获得的简化版本：http: //jsfiddle.net/MhEEH/3/

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

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

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

  1. 如果我更改选项卡“主题”，高度（27px）可能会改变
  2. 如果我有很多选项卡，我将在第一行下方有第二行。所以我的面板内容将覆盖第二行......

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

JavaScript 是可以接受的，而（干净的！）纯 CSS 解决方案会更好......

- 问候，

斯特凡

4

10 回答 10

17

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

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

从API 文档：

高度风格

类型：字符串

默认值：“内容”

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

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

尽管您认为纯 CSS 解决方案会非常好是对的，但由于无论如何您都在使用 JavaScript来构建选项卡功能，因此最好使用您已经拥有的脚本的现有功能。

更新：

于 2013-03-15T03:00:55.823 回答
3

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

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

它似乎有效：

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

于 2013-02-11T14:26:40.517 回答
2

这就是你所追求的吗？

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%;
}
于 2013-02-11T14:21:17.093 回答
2

我只是尝试使用这个：

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

在 jsfiddle 中它工作正常。不知道它会在你的页面上如何 http://jsfiddle.net/MhEEH/7/

于 2013-02-11T14:23:16.673 回答
2

操作，

检查这个小提琴。

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

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

希望这可以帮助。

于 2013-03-13T22:02:19.083 回答
2

下面是我的 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/

希望能帮助到你，

干杯

于 2013-03-18T04:48:29.023 回答
2

最简单的解决方案，CSS的两处改动，问题解决了，#tabs{height:100%;}

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

这会做:) 更新的小提琴

于 2013-03-18T12:44:16.317 回答
1

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

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;

}

希望这可以帮助！！！

于 2013-03-18T06:19:58.037 回答
0

我认为没有必要在此处使用 javascript 进行基本样式修改。我最近将一个单页全屏样式应用程序从使用定位和其他东西从 javascript 调整大小到纯 CSS 转换。

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

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

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

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

编辑

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

于 2013-03-15T14:59:17.290 回答
0

我在#tab-1 id 中添加了一个顶部位置值，以将其推到选项卡本身下方。

见：http: //jsfiddle.net/MhEEH/40/

这是相关的CSS：

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

希望能帮助到你！

于 2013-03-18T14:02:56.033 回答