Full page column in materialize css

Question

First here is the screenshot of what is wrong with the current code and here is the code that is associated with the same

  <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>

first i don't see the reason why 4 is a little below 1. This bug resolves when i add a margin of 10 px to top of row, but the thing is that red menu bar should be colored and therefore i don't wan't any white space in between that.

The second question, that i am not sure about how to do that the correct way is that i want both blue and red to cover the entire height on the browser window. Is there anyway how to do the same in materialize , or if not please help me with how that is possible.

Answer 1

To set the height to full view add this CSS

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

It will help setting the height to view port height.