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

我可以使用顶部:27px;"解决这个问题，但这会与两件事发生冲突:

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

1. 如果我更改标签主题"，高度 (27px) 可能会改变
2. 如果我有很多选项卡，我将在第一行下方设置第二行.所以我的面板内容将覆盖第二行...

一个干净的 &简短的解决方案就可以了.

A clean & short solution would be fine.

JavaScript 是可以接受的，而(干净的！)纯 CSS 解决方案更可取...

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

-- 问候，

斯蒂芬

推荐答案

不要使用自己的 CSS，而是使用 jQuery UI 的内置功能.<​​/p>

Instead of using your own CSS, use jQuery UI's built-in feature.

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

来自 API 文档:

heightStyle

类型:字符串

默认:内容"

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

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

• auto":所有面板都将设置为最高面板的高度.
• 填充":根据标签的父级高度展开到可用高度.
• 内容":每个面板的高度与其内容一样高.

虽然您是对的，一个简单的 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.

更新:

• 有关最简单的完整示例，请参阅 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 事件，但此插件扩展了对该事件的支持到正在调整大小的任意元素.

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屋！