display: -webkit-box; 盒子模型布局header和footer上下固定

	<style>
    html,
    body {
      height: 100%; /* 要有高度 */
    }

    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: center;
    }

    .outBox {
      display: -webkit-box;  /* 必要 */
      -webkit-box-orient: vertical; /* 排列方式 */
      height: 100%;
    }

    .inBox {
      -webkit-box-flex: 1; /* 必要 */
      overflow: auto; /* 必要 */
      background-color: #ccc;
    }

    header,
    footer {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #999;
    }

    li {
      height: 40px;
      line-height: 40px;
    }

    li:nth-child(2n+1) {
      background: #efefef;
    }
  </style>

<div class="outBox">
    <header>头部</header>
    <ul class="inBox