html - 如何使用 kendo ui splitter 在整个可用区域显示 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

这是我的第一个回答所以要温柔!但是您可以向拆分器添加一个明确的高度作为视口(viewport)的高度:

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

然后是一些 CSS(我已经将它放在样式表中，但可以像上面那样进行内联):

#Top-Pain {
height: 50%;
}

#Bottom-Pane{
height: 50%;
}

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