页脚停留在底部，但是在浏览器调整大小时，页脚被推到内容的顶部

这是指向Codepen的链接http://codepen.io/Kwits/pen/mVRqbx?editors=110

所以这是两列布局，我计划在两者的底部都有一个页脚。左列是固定的，而右列是可滚动的。

问题是，如果将浏览器的高度拉高，则页脚随之而来。理想情况下，我希望它在导航div之前停止。

感谢您的帮助，我已经坚持了几个小时。

这是我的HTML

<div class="left">
  <header>
    <div class="logo">
      <img src="images/Logo.png" alt="">
      <h1 id="logo_title">Business name</h1>
    </div>
  </header>

  <ul class="nav">
    <li>
      <a href="index.html"><img src="images/home_btn.png" class="home"></a>
    </li>
    <li>
      <a href="about.html"><img src="images/about_btn.png" class="about"></a>
    </li>
    <li><img src="images/curriculum_btn.png"></li>
    <li><img src="images/contact_btn.png"></li>
  </ul>

  <div class="footer-left">
    <p>Address</p>
    <p>City</p>
    <p>Post Code</p>
    <p>Phone Number</p>
  </div>
</div>
<div class="right">
  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary
    of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc..</p>
</div>

这是CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.right {
  height: 100%;
  position: absolute;
  border-left: 2px solid grey;
  background: #74C279;
  overflow: auto;
  z-index: 0;
  left: 303px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 50px;
}

.left {
  border-right: 5px solid gray;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 300px;
  background: #F0C090
}

.footer-left {
  width: 100%;
  position: absolute;
  bottom: 0;
  font-size: 22px;
  line-height: 10px;
  text-align: center;
}