好吧,我有一个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/