Javascript Jquery拆分条100%面板高度

我在这里使用jquery splitter插件（第一次谷歌点击）：

我有一个示例代码：

HTML:

JS:

这给了我以下结果：

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

将

#widget

的高度更改为

#foo

和

#bar

之间的最高高度

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

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

---

使用插件有什么特殊要求吗？我的意思是，你可以通过简单的css、flexbox、column等来实现这一点。splitter允许通过向左或向右拖动拆分栏来动态调整面板的大小。Google用于人造列。@MaryMelody:它不是重复的！这是一个相关的新问题。由于两个面板的内容都可以动态增长，我更喜欢CSS解决方案，因此每次调整大小时，我不必执行JS代码。

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

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

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

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

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

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