Footer covers my content when using w3.css

I am trying out w3.css for styling, along with knockout, and when I use a footer, it covers the content near the bottom of the page.

I have a button at the bottom of my content. When the page resizes or is small enough, the footer covers the button.

See codepen, or the code below

 function setting(color) {
   this.color = ko.observable(color);
   this.colorClassName = ko.computed(function() {
     return "w3-hover-" + this.color();
   }, this);
 }

 function myInput() {
   this.data = ko.observable("");
   this.nameValid = ko.computed(function() {
     return !(this.data() == null || this.data().length == 0);
   }, this);
   this.error = ko.computed(function() {
     //if (this.data() == null || this.data().length == 0)
     if (this.nameValid() == false) {
       return "Enter name";
     } else {
       return "";
     }
   }, this);

   this.display = ko.computed(function() {
     if (this.nameValid() == false) {
       return "block";
     } else {
       return "none";
     }
   }, this);

   this.ageData = ko.observable();
   this.ageValid = ko.computed(function() {
     var age = this.ageData() + "";

     var patt = new RegExp(/^[0-9]+$/g); /// ^-from start, $-to end, [0-9] - 0 to 9 numbers only
     var res = patt.test(age);
     if (isNaN(age) == true || res == false) {
       return false;
     } else {
       return true;
     }
   }, this);
   this.ageError = ko.computed(function() {
     if (this.ageValid() == false) {
       return "Enter a valid age";
     } else {
       return "";
     }

   }, this);
   this.ageDisplay = ko.computed(function() {
     if (this.ageValid() == true) {
       return "none";
     } else {
       return "block";
     }
   }, this);

   this.phone = ko.observable('http://digitalbush.com/projects/masked-input-plugin/');

   this.allValid = ko.computed(function() {
     return this.ageValid() && this.nameValid();
   }, this);
 }

 function myModel() {
   this.name = "Ice-Cream";
   this.items = [{
     name: "Chocolate",
     price: 10
   }, {
     name: "Vanilla",
     price: 12
   }];
   this.style = new setting('pale-green');
   this.input = new myInput();

   this.changeColor = function() {
     if (this.style.color().indexOf('blue') == -1) {
       this.style.color('pale-blue');
     } else {
       this.style.color('pale-green');
     }
   };
 }
 ko.applyBindings(new myModel());

<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" type="text/css">

<body class="w3-content w3-pale-blue" style="max-width:100%">
  <header class="w3-container w3-pale-green w3-border">
    <h1>Hello</h1>
  </header>
  <div class="w3-container w3-pale-yellow w3-border w3-padding-hor-16 w3-content" style="max-width:100%">
    <a href="http://www.w3schools.com/w3css">W3.CSS</a>
    <p>
      The item is <span data-bind="text: name"></span> today.
      <br />Available flavours are:
    </p>
    <div class="w3-container">
      <ul data-bind="foreach: items" class="w3-ul w3-left w3-border w3-border-red">
        <li class="w3-ul w3-hoverable w3-border-red " data-bind="css: $parent.style.colorClassName()">
          <span data-bind="text: name"></span> is $<span data-bind="text:price" />
        </li>
      </ul>
    </div>

    <label class="w3-label w3-text-blue w3-xlarge">Name</label>
    <input class="w3-input w3-border" type="text" data-bind="textInput: input.data">
    <label class="w3-label w3-text-red w3-large" data-bind="text: input.error(), style: { display: input.display()}"></label>
    <br />
    <label class="w3-label w3-text-blue w3-xlarge">Age</label>
    <input class="w3-input w3-border" type="text" data-bind="textInput: input.ageData">
    <label class="w3-label w3-text-red w3-large" data-bind="text: input.ageError(), style: { display: input.ageDisplay()}"></label>
    <br />
    <label class="w3-label w3-text-blue w3-xlarge">Phone</label>
    <input class="w3-input w3-border" type="text" data-bind="textInput: input.phone">
    <!--<label class="w3-label w3-text-red w3-large" data-bind="text: input.phoneError(), style: { display: input.phoneDisplay()}"></label>-->
    <br />
    <button class="w3-btn w3-border w3-border-teal w3-round w3-teal" data-bind="click: changeColor, enable: input.allValid()">Test</button>
  </div>

  <footer class="w3-light-grey w3-bottom">
    <div class="w3-container">
      <p>This is my footer</p>
    </div>
  </footer>

Solution

My solution was to add another div element with the same content as my footer, but make it invisible. This way it will fill the space behind the real footer.

In the code i above i will add the following

<div class="w3-container" style="opacity:0">
  <p>This is my footer</p>
</div>

The updated codepen shows the solution.