相对位置和高度100％

Question

我有jQuery插件拆分器 ，它仅在将容器设置为固定高度的情况下起作用，如果将容器的高度设置为100％，则它不起作用。 如果我不带height()运行插件，则高度为0。

为什么高度为0且position: relative和height: 100% ？ 是否可以使它的高度为100％，还是我始终需要固定高度？

JSFIDDLE

Answer 1

要使百分比高度不为0的元素必须具有高度的父元素。 如果您将一个高度为200像素左右的容器放置在容器周围，它将是父容器的100％，即200像素；

<div style="height: 200px">  
  <div id="foo">...</div>
</div>

参见小提琴： http ： //jsfiddle.net/7fMDz/2/

或者，您可以执行以下操作：

$('#foo').height($(window).height()).split();

如果您试图使其达到屏幕的100％高度。

Answer 2

jcubic，请尝试以下代码：

$(function() {
    $('#foo').height($( window ).height()).split({
        orientation:'vertical',
        limit:10
    });
});

参见小提琴： http : //jsfiddle.net/7fMDz/5/