html - 如何使用 kendo ui 拆分器在完整可用区域中显示 div 容器？

Question

我想在完整的可用区域中显示这个 div 的内容，我在 jsfiddle 中创建的示例，当加载它显示如下的页面时，我想将此页面作为一个完整页面（用绿色圈起来） ，但我无法覆盖红色圈出的区域。有什么建议么？

<div id="main_Container" style="width:auto;height:auto;">
  <div id="splitter" >
                    <div id="Top-Pane">Top Pane Content
                        <div> Some more content</div>      
                    </div>
                    <div id="Bottom-Pane">Bottom Pane Content                            
                       <div id="tabContainer">  

                        </div>

                    </div>

  </div>
</div>

http://jsfiddle.net/KendoDev/Z4rwQ/9/

Answer 1

这是我第一次回答所以要温柔！但是您可以向拆分器添加一个明确的高度作为视口的高度：

    var viewportHeight = $(window).height();
    $("#splitter").height(viewportHeight);

然后是一些 CSS（我已经把它放在样式表中，但可以像你上面那样做内联）：

#Top-Pain {
height: 50%;
}

#Bottom-Pane{
height: 50%;
}

那想要的效果呢？http://jsfiddle.net/chowie/Z4rwQ/11/