将3x3网格相对于整个视口高度对齐而不偏移

Question

好吧，我有3x3维度的网格，我也使用CSS框架 - materializecss ，我无法达到我的目标，或者说这个标题：

他们的文件says：

  

注意：我们使用flexbox构建html，以便页脚始终位于页面底部。将页面结构保留在3个HTML5标记中非常重要：<header>, <main>, <footer>

我做到了。还为 html ，正文添加了height: 100%, min-height: 100%，它根本没有帮助。谢谢！

html,
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header {
  height: 50px;
}

main {
  flex: 1 0 auto;
}

#container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  font-family: sans-serif;
  text-transform: uppercase;
}

header {
  flex-basis: 100%;
  color: #eb6a45;
  background-color: #88ba93;
  text-align: center;
  padding: 10px;
}

.item {
  flex-basis: 33%;
  flex-grow: 1;
  text-align: center;
  padding-top: 10vw;
  padding-bottom: 10vw;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background-color: #48a089;
  color: #fefda5;
  transition: 0.3s ease-in-out background-color, 0.3s ease-in-out color;
}

.item:hover {
  background-color: #063328;
  color: #484848;
}


}

<header>

</header>

<main>
  <div id="container">
    <div class="item b"><img height="100" width="100" src="#" /></div>
    <div class="item b"><img height="100" width="100" src="#" /></div>
    <div class="item b"><img height="100" width="100" src="#" /></div>
    <div class="item b"><img height="100" width="100" src="#" /></div>
    <div class="item b"><img height="100" width="100" src="#" /></div>
    <div class="item b"><img height="100" width="100" src="#" /></div>
    <div class="item b"><img height="100" width="100" src="#" /></div>
    <div class="item b"><img height="100" width="100" src="#" /></div>
    <div class="item b"><img height="100" width="100" src="#" /></div>
  </div>
</main>

<footer>

</footer>

这是小提琴：ctrl + click

Answer 1

以下是我所做的更新：

JSFiddle

HTML：

• 删除了图像的内联宽度/高度

CSS：

将html / body min-height更改为height并添加border-box：

html, body {
    height:100vh; // Force 100vh height instead of making it a minimum
}

将<main>和<header>更改为百分比高度：

header { height:10%; } // Make header 10% of document
main { height:90%; } // Make main 90% of document

为图像添加最大宽度/高度：

img { max-width:100%; max-height:100%; }

为项添加了一个高度，并将填充更改为10px：

.item {  
    box-sizing:border-box; // Border box fix for padding
    height:33%;  
    padding:10px; 
}