Jquery Splitter棒100％面板高度

Question

我正在使用jquery splitter插件（第一次google hit）：https://github.com/jcubic/jquery.splitter

我有一个示例代码：

HTML：

<div id="widget">
    <div id="foo">
        Left Panel
    </div> 
    <div id="bar">
        right panel
    </div>
</div> 

CSS：

#widget {
        width: 400px;
        height: 100px;
    }

     #foo {
         background-color: #E92727;
         height: 1000px;
     }

    #bar {
        background-color: #BEE927;
        height: 100%;
    }

JS：

$('#widget').split({ orientation: 'vertical', limit: 100 });

这给了我以下结果：

现在我需要两个面板（左和右）始终保持相同的高度，因此分割条到达最底部。两个面板的内容都可以动态增长。

Answer 1

将#widget的身高更改为#foo和#bar之间的最高身高

var foo = $('#foo').height();
var bar = $('#bar').height();

$('#widget').height( (foo > bar) ? foo : bar );