标签会自动调整大小 - 可以预防吗?

时间:2011-11-08 21:40:48

标签: jquery jquery-ui jquery-ui-tabs

我有一个如下所示的结构:http://peterned.home.xs4all.nl/examples/csslayout1.html - 中间div调整大小以适应窗口的高度。

在中间div中我有标签,但在调用.tabs()方法时,代码会自动调整标签大小以适应内容的高度。我想阻止这种行为,因为我将动态替换选项卡的内容,原来计算的高度将是错误的。

我已尝试在CSS中设置标签的高度,但它只是忽略它。

我该如何做到这一点?

*编辑*

我已经在jsfiddle:http://jsfiddle.net/tmLZS/发布了代码,您可以在其中看到这些标签会自行调整大小(在Windows 9下的IE 9和Chrome 14中)到其内容的高度。

我希望在给定窗口大小的情况下让它们尽可能大,并在内容超出窗口大小时滚动它们。

2 个答案:

答案 0 :(得分:2)

这与内容的100%高度/最小高度类似。 This post就此主题进行了一些很好的讨论。

我自己曾几次摆弄这个问题,并且发现用纯CSS解决这个问题非常耗费时间(而且常常是不可行的)。通常需要一两行JavaScript来实现相同的效果。例如,对于您提供的jsfiddle,您需要做的就是将#tabs的高度设置为document的高度:

$('#tabs').tabs().height($(document).height());

查看实际操作:http://jsfiddle.net/william/tmLZS/3/

请注意,我还更改了#tabs的{​​{3}},因此边框和填充都包含在高度中。您不必这样做(此属性是CSS3),但这意味着您需要在计算高度时考虑边框和填充。

答案 1 :(得分:0)

在William Nui的代码的基础上,我还添加了一些东西。

我在用户实际调整窗口大小时添加了一个“监听”事件。

http://jsfiddle.net/tmLZS/30/

使用更新的代码进行编辑!

http://jsfiddle.net/tmLZS/100/