Edit in JSFiddle

<div class="container elem">
    <span class="label begin"> &lt;div class="container"&gt; </span>
    <nav class="elem elem-red">
        <span class="label begin"> &lt;nav&gt;</span>
        <ul>
            <li>nav-item1</li>
            <li>nav-item2</li>
            <li>nav-item3</li>
            <li>nav-item4</li>
            <li>nav-item5</li>
            <li>nav-item6</li>
        </ul>
         <span class="label end"> &lt;/nav&gt; </span>
    </nav>
    <section class="elem elem-orange">
         <span class="label begin"> &lt;section&gt;</span>
        <p>section的 margin-left 样式确保了有足够的空间容纳 nav 元素。</p>
         <span class="label end"> &lt;/section&gt; </span>
    </section>
    <section class="elem elem-orange">
         <span class="label begin"> &lt;section&gt;</span>
        <p>一些内容</p>
         <span class="label end"> &lt;/section&gt; </span>
    </section>
    <section class="elem elem-orange">
         <span class="label begin"> &lt;section&gt;</span>
        <p>注意当你调整浏览器窗口时发生了什么。效果很赞！</p>
         <span class="label end"> &lt;/section&gt; </span>
    </section>
</div>

<footer class="elem elem-green">
<span class="label begin"> &lt;footer&gt; </span> 
    <p>如果你使用了一个固定定位的页眉或页脚，确保有足够的空间来显示它们！我在 body 上面加了 margin-bottom 。</p>
    <span class="label end"> &lt;/footer&gt; </span>
</footer>

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.elem{
    border:solid #6AC5AC 3px;
    position:relative;
}
.elem-red {
    border: solid #D64078 3px;
}
.elem-orange {
    border: solid #FDC72F 3px;
}
.elem-green {
    border: solid #96C02E 3px;
}
.label{
    position:absolute;
    background-color:#6AC5AC;
    line-height:1em;
    padding:3px;
}
.elem-red > .label{
    background-color:#D64078;
}
.elem-orange > .label{
    background-color:#FDC72F;
}
.begin{
    left:0;
    top:0;
}
.end{
    right:0;
    bottom:0;
}
p{
    margin:2em 0;
    display:block;
}

.container {
  position: relative;
}
nav,nav.elem {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
footer,footer.elem {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body {
  margin-bottom: 120px;
}