今天又遇到的一个easyui样式的问题

最近学习jquery easyui，用easyui的layout做了一个后台页面的框架，如下图所示：

其中左边的导航菜单遇到一点点样式问题，当我调整窗口的大小时会出现：

①、左边的导航菜单的边框线会消失

②、导航菜单的宽度拉伸时菜单项的宽度不变，留出一部分空白

③、导航菜单超出屏幕的部分会显示不出来，不会出现滑动块

如下图所示：

后来发现出现该问题的原因是这部分：

<div data-options="region:'west',border:true,split:true,collapsible:true,title:'系统菜单'" style=" 240px;height:100%;" class="easyui-accordion">
    @{
        foreach (var m1 in ViewBag.Menu)
        {
            if (m1.PID == -1)
            {
        <div title="@m1.Name" data-options="iconCls:'icon-ok'" style="100%;height:200px;overflow:auto;">
            <ul class="sub-menu">
                @{
                var menu = ViewBag.Menu as List<Menu>;
                var children = menu.Where(o => o.PID == m1.ID).ToList();
                if (children != null && children.Count > 0)
                {
                    foreach (var m2 in children)
                    {
                    <li><a href="#" onclick="addTab(@m2.ID,'@m2.Name','@m2.Url');" id="@m2.ID">@m2.Name</a></li>
                    }
                }
                }
            </ul>
        </div>
            }
        }
    }
</div>

外面这个<div>既设置了region属性又设置了class=easyui-according，与之前提到的tabs当页面的大小改变之后页面不会自适应的问题类似。以后使用easyui来布局时尽量不要一个标记使用多个属性，一般把region放在外面这层，在region里面再加一个div来表示具体控件