Jquery easy UI 上中下三栏布局

效果图：

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery easy UI 上中下三栏布局</title>
    <link href="jquery-easyui-1.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script src="jquery-easyui-1.4/jquery.min.js" type="text/javascript"></script>
    <script src="jquery-easyui-1.4/jquery.easyui.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="easyui-layout" id="mainLayout" border="false">
        <div id="topPanel" data-options="region:'north',split:true" title="顶部部分">
        </div>
        <div id="centerPanel" data-options="region:'center',split:true" title="中间部分">
        </div>
        <div id="bottomPanel" data-options="region:'south',split:true" title="底部部分">
        </div>
    </div>
    <script type="text/javascript">
        window.customResize = function () {
            var width = $(window).width() - 10;
            var height = $(window).height();
            var panelHeight = parseInt(height / 3); //每个1/3高度
            $('#topPanel').panel('resize', { width: width, height: panelHeight });
            $('#centerPanel').panel('resize', { width: width, height: panelHeight });
            $('#bottomPanel').panel('resize', { width: width, height: panelHeight });
            $('#mainLayout').layout('resize', { width: width, height: height });
        };
    </script>
    <script type="text/javascript">
        //窗口缩放时，重绘布局控件尺寸
        $(function () {
            redraw();
        });

        $(window).resize(function () {
            redraw();
        });

        function redraw() {
            if (window.customResize) {
                customResize(); //自定义缩放函数，页面若使用多个布局控件，需自定义缩放函数处理
            } else {
                var width = $(window).width();
                var height = $(window).height();

                //没有自定义缩放函数时，默认对panel，layout，treegrid，datagrid等控件进行调整
                $('.easyui-panel').panel('resize', { width: width, height: height });
                $('.easyui-layout').layout('resize', { width: width, height: height });
                $('.easyui-treegrid').treegrid('resize', { width: width, height: height });
                $('.easyui-datagrid').datagrid('resize', { width: width, height: height });
            }
        }
    </script>
</body>
</html>

完整示例：

http://qingshanboke.com/Uploadfiles/file/20150206/6355881114276855463509463.rar