我有一个如下所示的结构:http://peterned.home.xs4all.nl/examples/csslayout1.html - 中间div调整大小以适应窗口的高度。
在中间div中我有标签,但在调用.tabs()
方法时,代码会自动调整标签大小以适应内容的高度。我想阻止这种行为,因为我将动态替换选项卡的内容,原来计算的高度将是错误的。
我已尝试在CSS中设置标签的高度,但它只是忽略它。
我该如何做到这一点?
*编辑*
我已经在jsfiddle:http://jsfiddle.net/tmLZS/发布了代码,您可以在其中看到这些标签会自行调整大小(在Windows 9下的IE 9和Chrome 14中)到其内容的高度。
我希望在给定窗口大小的情况下让它们尽可能大,并在内容超出窗口大小时滚动它们。
答案 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的代码的基础上,我还添加了一些东西。
我在用户实际调整窗口大小时添加了一个“监听”事件。
使用更新的代码进行编辑!