好吧,我有一个3x3尺寸的网格,而且我正在使用CSS框架-materializecss,但我无法达到标题说明或这样的目标:



他们的文档says


  注意:我们使用flexbox来构造html,以便页脚始终位于页面底部。将页面的结构保持在3个HTML5标签内非常重要:<header>, <main>, <footer>


我做的。也只是为HTML,body添加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

最佳答案

这是我所做的更新:

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

关于html - 相对于整个视口(viewport)高度对齐3x3网格而无偏移,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44162711/

10-12 12:26
查看更多