CSS tabbed menu, 100% height not working - PART 2

Question

After the other post on this, I think I needed to step back and take a look and make a more clear fiddle to show the issue happening.

So, my content within the blue box is overlapping the footer and the rest of the page when it gets to a certain height, it is fine to start with but then once it reaches the end it carries on and overflows. overflow:hidden simply hides the text so that isn't the solution.

What needs to happen is the footer and the rest of the page needs to readjust so it is always positioned at the foot of the content.

Here is an updated fiddle with the issue http://jsfiddle.net/3ZV3P/1/

CODE

<div class="cont-wrapper">
<ul class="tabs">
    <li>
      <input type="radio" checked name="tabs" id="tab2">
      <label for="tab2"><h2>TEST1</h2><br>
     TEST TEXT<br>
      </label>
      <div id="tab-content2" class="tab-content animated fadeIn">

      <div id="further-left-tech-info" >
        TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT    GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERETEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE
        </div>
            <div id="further-right" >
                <div class="blue-box cta">
                        <p>TEXT IN HERE </p>
                    <a href="http://www.google.co.uk"></a> 
                    </div>
            </div>
        </div>
    </li>
</ul>
  </div>
        <footer>
   <div class="footer-content">
  <div class="footer-col col1">
  <p class="copyright">Company name<br></p>
  ADD1<br>
  ADD2<br>
  uk<br>
  Postcode<br>
  <p class="copyright2"><a href="http://www.google.co.uk">Home</a><br></p>
  <a href="http://www.google.co.uk">About Us</a><br>
  <a href="http://www.google.co.uk">Contact Us</a><br>
  <a href="http://www.google.co.uk">Register</a>    <br><br>
  <div class="copyright-centre">&copy; 2014 &nbsp;Company Name</div>
    </div>
  </div>
</footer>

CSS BELOW

.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
}
.tabs {
width: 1020px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 20px auto;
}
  .tabs li{
    float: left;
    width:300px;
    margin-left:24px;
}
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #08C;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      border-radius: 8px 8px 0px 0px;
  }
  .tabs label:hover {
    background: rgba(255,255,255,0.5);
    top: 0;
  }

  [id^=tab]:checked + label {
    background: #08C;
    color: white;
    top: 0;
  }

  [id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
  .tab-content{
    display: none;
    text-align: left;
    width: 96%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    background: #FFF;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #08C;
    padding: 15px;
    color: #4a4949;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
    margin-top:72px;
  }
  .cont-wrapper{
    width: 980px;
    background: #ffffff;
    padding-right: 0px;
    padding-left: 0px;
    height:950px;
    margin-left:20px;
    margin-right:20px;
    }
#further-left-tech-info {
width: 645px;
padding-right: 20px;
float: left;
padding-top: 5px;
font-size: 18px;
padding-bottom: 5px;
background: #ffffff;
padding-left: 0px;
}
#further-right {
float: right;
width: 234px;
padding-top: 20px;
position: relative;
padding-bottom: 20px;
margin-right: 35px;
}
.blue-box {
background:url(../images/blue-box.jpg) bottom;
width:249px;
height:146px;
margin-left:0px;
padding:25px;
padding-bottom:0;
width:199px;
color:#fff;
font-size:18px;
}