Footer sticking to bottom, but upon browser resize the footer is pushed on top of content

Question

Here's the link to codepen http://codepen.io/Kwits/pen/mVRqbx?editors=110

So this is a two column layout, I plan to have a footer on the bottom of both. The left column is fixed, whilst the right column is scrollable.

The problem is if the browser height is pulled up, the footer comes with it. Ideally I would have it stop just before the nav div.

Any help is appreciated, I've been stuck on this for hours.

This is my 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>

And this is the 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;
}

Answer 1

You need to have a javascript function setting the min-height of the left column equal to .left headers height + .left navs height + .left .footer-lefts height. This function has to run on page load and on any event that has the possibility of changing the height of any of the three children of left

On trying to write a js function to dynamically adjust the CSS for all your cases I realized this can be achieved easier with flexbox. Here's a solution. Relevant code:

.left {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.left .nav {
  flex-grow: 1;
}

Please note that I also removed the position property from .footer-left. If you add any other elements inside .left, you should apply the flex-grow: 1 to the last child before .footer-left. This tells that element to grow in height as much as it is needed so the footer stays down.