<nav class="blue darken-3">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Chatter</a>
      <ul class="right hide-on-med-and-down">
        <li><a nohref><i class="material-icons">search</i></a></li>
        <li><a nohref><i class="material-icons">view_module</i></a></li>
        <li><a nohref><i class="material-icons">refresh</i></a></li>
        <li><a nohref><i class="material-icons">more_vert</i></a></li>
      </ul>
    </div>
  </nav>

<div class="row">
  <div class="col s3 red">1</div>
  <div class="col s9 indigo" style="height:100%">4</div>
</div>

.col.s3.red, .col.s9.indigo {
  min-height: 100vh; /* use "vh" instead of % */
}

.full-width {
    height: 100%;
    min-height: 1000px !important;
}

<div class="col s3 yellow lighten-4 full-width">
  A
  </div>

  <div class="col s9 grey lighten-4 full-width">
  B
  </div>

<nav class="blue darken-3">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Chatter</a>
      <ul class="right hide-on-med-and-down">
        <li><a nohref><i class="material-icons">search</i></a></li>
        <li><a nohref><i class="material-icons">view_module</i></a></li>
        <li><a nohref><i class="material-icons">refresh</i></a></li>
        <li><a nohref><i class="material-icons">more_vert</i></a></li>
      </ul>
    </div>
  </nav>

<div class="row">
  <div class="col s3 red">1</div>
  <div class="col s9 indigo">4</div>
</div>

$(document).ready(function() {
    window_size = $(window).height();
    $('.col').height(window_size);
});

div.col.s3.red {
    min-height: 500px;
    height: 100%;
}

div.col.s9.indigo {
    min-height: 500px;
    height: 100%;
}

.nav-wrapper {
    line-height: 44px;
}

var resizeColumn = function () {
    my_column_el.height($(window).height() - my_column_el.offset().top);
  };

  $(window).on('resize.column', _.debounce(resizeColumn, 300));

  resizeColumn();

.flex {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;  /*or use calc(100vh - header_height)*/
}