overflow佈局

在寫後臺時，常見的佈局形式：側邊欄+header+footer+主內容區。主內容區可以自適應高度，有滾動條。(body不溢出)

html：

<div class="ui inverted segment" id="header">
        <button class="ui inverted blue basic button" id="indexBtn">首頁</button>
        <button class="ui right floated inverted blue basic button" id="logoutBtn">登出</button>
</div>

<div class="leftContainer">
        <ul class="list">
            <li>玩家管理
                <ul class="childList">
                    <!-- 請求的是 鏈接，不是 路徑！！！ （只要 該 鏈接 和 路由中的 鏈接 保持一致，就ok！！！）-->
                    <li><a href="/slguser/list">玩家管理</a></li>
                    <li><a href="/alliance/list">聯盟管理</a></li>
                    <li><a href="/slgreward/user">玩家召回</a></li>
                </ul>
            </li>
            <li>遊戲管理
                <ul class="childList">
                    <li><a href="/slgnotice/list">公告管理</a></li>
                    <li><a href="/slgmail/mail">郵件管理</a></li>
                    <li><a href="/slgorder/order">訂單管理</a></li>
                    <li><a href="/slgfeedback/List">客服反饋</a></li>
                    <li><a href="/slggift/list">禮包管理</a></li>
                </ul>
            </li>
        </ul>
    </div>

  <div class="mainContainer">
<!--根據不同的URL，動態的加載不同的模版-->
        <%- body %>
    </div>

  <div class="footer">
        <p>&copy; 2014</p>
    </div>

---

css：

body {
    color: white;
    background-color: #555555;
    overflow: hidden;
}

/* header begin */
#header {
    padding: .5em 1em;
    z-index: 2;
    border-bottom: 1px solid #ffffff;
    background-color: #1b1c1d;
}
/* header end */

/* leftContainer begin */
.leftContainer {
    position: absolute;
    top: 0;
    z-index: 1;
    background-color: #1b1c1d;
    width: 200px;
    height: 100%;
    border-right: 1px solid #ffffff;
    /*min-height: 300px;*/
}

.list {
    margin-top: 80px;
}

.list, .childList {
    margin-left: 10px;
    font-size: medium;
}

.list > li {
    color: white;
    margin-top: 15px;
}

.childList {
    margin: 10px 15px;
}

li {
    margin-top: 6px;
}
/* leftContainer end */

/*設置 主內容區滾動，側邊欄不滾動*/
.mainContainer {
    margin-top: -20px;
    margin-left: 230px;
    padding-bottom: 220px;
    height:100%;
    overflow-y: auto;
}
**###其中，最重要的就是：在主內容區設置， height:100%;   overflow-y: auto;####**
/* footer begin */
.footer {
    z-index: 2;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    text-align: center;
    color: white;
    background-color: #0f0f10;
    border-top: 1px solid #ffffff;
    padding-top: 5px;
}
/* footer end */