css - 实现 css 中的整页列

Question

首先是当前代码错误的截图 这是与之相关联的代码

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

首先我不明白为什么 4 略低于 1。当我在行顶部添加 10 像素的边距时，这个错误解决了，但问题是红色菜单栏应该是彩色的，因此我不知道中间不要有任何空白。

第二个问题，我不确定如何以正确的方式做到这一点，我希望蓝色和红色都覆盖浏览器窗口的整个高度。无论如何如何在 materialize 中做同样的事情，或者如果没有请帮助我如何可能。

Answer 1

要将高度设置为完整 View ，请添加此 CSS

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

这将有助于设置高度以查看端口高度。