今天又遇到的一個easyui樣式的問題

最近學習jquery easyui，用easyui的layout作了一個後臺頁面的框架，以下圖所示：

其中左邊的導航菜單遇到一點點樣式問題，當我調整窗口的大小時會出現：

①、左邊的導航菜單的邊框線會消失

②、導航菜單的寬度拉伸時菜單項的寬度不變，留出一部分空白

③、導航菜單超出屏幕的部分會顯示不出來，不會出現滑動塊

以下圖所示：

後來發現出現該問題的緣由是這部分：

<div data-options="region:'west',border:true,split:true,collapsible:true,title:'系統菜單'" style="width: 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="width: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來表示具體控件