Разделитель jquery (или js general) с динамической высотой

Есть несколько готовых сплиттеров JavaScript (jQuery), но они требуют установки высоты панелей. Проблема в том, что мой сайт не поддерживает фиксированную высоту, просто не может. Другое дело, что этот контейнер может динамически изменять свою высоту, поэтому я хотел бы, чтобы этот сплиттер подстраивался под высоту панелей.

Есть ли сценарий или способ избежать этого?

Моя идея состояла в том, чтобы установить высоту контейнера на большую высоту панели, например:


var lheight = $("#LeftPanel").height();
var rheight = $("#RightPanel").height();

if(lheight > rheight){
    $("#container").css("height", lheight+"px");
} else {
    $("#container").css("height", rheight+"px");
}

но это не кажется хорошим способом для меня.

Есть ли у вас какие-либо предложения?


javascript jquery splitter
person Ventus    schedule 28.09.2010    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете передать новое значение в .height(), например:

var h = Math.max($("#LeftPanel").height(), $("#RightPanel").height());
$("#container").height(h);

В этом случае мы просто используем Math.max(), чтобы получить более высокий один, и установка высоты для этого.

person Nick Craver    schedule 28.09.2010
comment
это то же самое, что и мой код, но написано проще. Есть ли способ сделать это лучше? Я имею в виду без этого трюка с высотой? - person Ventus; 28.09.2010
comment
@Ventus - Если бы панели были дочерними элементами #container, они должны были бы изменять размер автоматически ... есть ли причина, по которой это не работает, вообще без JavaScript? - person Nick Craver; 28.09.2010
comment
на самом деле панели являются дочерними элементами #container и меняют размер вместе с ними. Но дело в том, что #container нужно установить свойство CSS height, иначе сплиттер не работает. Пока я не найду лучший способ, я буду использовать этот $("#content").height($("#content").height());, он самый простой, поскольку (как вы упомянули) панели являются дочерними элементами #container. - person Ventus; 29.09.2010
comment
@Ventus - Вы также можете сделать $("#content").height(function(i, h) { return h; }); - person Nick Craver; 29.09.2010
comment
Поскольку вы представили хорошие идеи в своем ответе и комментариях, я принимаю это :) - person Ventus; 29.09.2010