Позиция относительная и высота 100%

Question

У меня есть плагин jQuery splitter, и он работает только. Если я установил контейнер на фиксированную высоту, если я установил высоту на 100%, это не сработает. Если я запустил плагин без height(), высота равна 0.

Почему высота 0 с position: relative и height: 100%? Можно ли заставить его работать со 100% высоты, или мне всегда нужно иметь фиксированную высоту?

JSFIDDLE

Answer 1

Для элемента, чтобы иметь высоту в процентах не может быть 0, он должен иметь родителя с высотой. Если вы поместите контейнер вокруг него с высотой: 200 пикселей или что-то еще, это будет 100% от родителя, поэтому 200px;

<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/