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 */