jQuery选项卡：面板覆盖100％高度的选项卡 [英] jQuery tabs: panel covers tabs at 100% height

问题描述

我尝试使用jQuery-UI的标签窗口小部件来扩展到整个可用空间。

I'm trying to use the tabs widgets of jQuery-UI having panels content to extend to the whole available space.

这是一个简化版本的到目前为止：
http://jsfiddle.net/MhEEH/3/

Here's a simplified version of what I've got so far: http://jsfiddle.net/MhEEH/3/

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

You'll see that the green panel content of #tab-1 just covers the whole page, instead of just the panel space, when I use the following CSS:

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

我可以使用top：27px;但是这会与两件事情发生冲突：

I could use "top: 27px;" to fix that, but this would collide with two things:

1. 如果我改变标签theme，高度更改


2. 如果我有很多标签，我会在第一行下面第二行。所以我的面板内容会覆盖第二行...

短的解决方案会很好。

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

JavaScript is acceptable, while a (clean!) CSS-only solution would be preferable...

- 谨慎，

Stefan

推荐答案

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

从 API文档：

heightStyle

类型：String

默认值：content

Default: "content"

控制制表符的高度窗口小部件和每个面板。可能的值：

Controls the height of the tabs widget and each panel. Possible values:

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


• fill：根据标签的父级高度展开到可用高度。


• content：每个面板只能与它的内容。

虽然你是对的，一个简单的CSS解决方案会很好，仍然使用JavaScript 建立标签功能，最好使用已有脚本的现有功能。

Although you are right that a plain CSS solution would be very nice, since you are using JavaScript anyway to build the tab functionality, it will be best to use the existing capabilities of the script you already have.

UPDATE ：

• 查看 http://jsfiddle.net/MhEEH/45/ 最简单的完整示例。注意，它不需要任何CSS position 规则。

• See http://jsfiddle.net/MhEEH/45/ for the simplest full example. Note that it does not need any CSS position rules.

您需要使用http://benalman.com/projects/jquery-resize-plugin/ （或类似网站）查看父级的大小更改。浏览器默认只触发窗口本身上的 resize 事件，但此plugin将对该事件的支持扩展到正在调整大小的任意元素。

You need to use http://benalman.com/projects/jquery-resize-plugin/ (or similar) to watch the parent for size changes. Browsers only fire the resize event on the window itself by default, but this plugin extends support for that event to arbitrary elements being resized.

这篇关于jQuery选项卡：面板覆盖100％高度的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！