当 flex-wrap 内容超过身体高度时，CSS 额外的间距
[英]CSS extra spacing when flex-wrap contents over body height
问题描述
I have flex-wrap div and several items inside.
我有 flex-wrap div 和里面的几个项目。 But when screen get smaller, body height can't follow their height and make space at bottom.但是当屏幕变小时，身体高度不能跟随他们的高度而在底部留出空间。 Why it happens and how to solve it?为什么会发生以及如何解决？
index.html
索引.html
<!doctype html>
<html lang="ko" class="bg-orange">
<head>
...
</head>
<body>
<div class="project">
<div class="prototype-box">
1
</div>
<div class="prototype-box">
2
</div>
<div class="prototype-box">
3
</div>
</div>
style.css样式文件
body, html {
margin: 0;
padding: 0;
height: 100%;
color: #fff;
}
.project {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.prototype-box {
width: 400px;
height: 200px;
}
3 个解决方案
解决方案1
2 2018-10-07 06:23:38
try not to touch the body and insert your flex div inside a wrapper div.尽量不要触摸身体并将您的 flex div 插入包装 div 中。 so you can make the spacing.所以你可以做间距。 you can refer to my pen here.你可以在这里参考我的笔。
body, html { margin: 0; padding: 0; height: 100%; color: #fff; } wrapper{ /* Add this wrapper */ background-color: #dddddd; margin: 10% 0; } .project { display: flex; flex-wrap: wrap; justify-content: center; /* add the code below */ background-color: red; width: 75%; margin: 5% auto; flex-direction: column; } .prototype-box { background-color: blue; height: 200px; /* Add this code */ width: auto; margin: 15px; }
<body> <div class="wrapper"> <!-- Add this wrapper --> <div class="project"> <div class="prototype-box"> 1 </div> <div class="prototype-box"> 2 </div> <div class="prototype-box"> 3 </div> </div> </div> </body>
解决方案2
0 2018-10-07 06:14:59
You use px to height what means it absolute.您使用px来调整height这意味着它是绝对的。 So for example, 200px will be literally 200 pixels on any screen.因此，例如，200px 在任何屏幕上实际上都是 200 像素。 So if the body height is smaller then 600px ( 200px+200px+200px ) scroll( overflow-y ) will show by default...因此，如果主体高度较小，则默认情况下将显示600px （ 200px+200px+200px ）scroll（ overflow-y ）...
If you want them to fit body's height you have to set %/vh to height如果你想让它们适合body's height你必须将%/vh设置为height
Percentage (%): Relative to the parent value.百分比(%)：相对于父值。
Viewport height (vh): Size relative to the viewport (browser window, basically).视口高度(vh)：相对于视口的大小（基本上是浏览器窗口）。
body, html { margin: 0; padding: 0; height: 100%; color: #fff; } .project { display: flex; flex-wrap: wrap; justify-content: center; } .prototype-box { border: 1px solid black; width: 400px; height: 32vh; }
<div class="project"> <div class="prototype-box"> 1 </div> <div class="prototype-box"> 2 </div> <div class="prototype-box"> 3 </div> </div>解决方案3
0 2018-10-07 08:59:30
It happens because you made the body limited to height:100% of the html which limited to height:100% of the screen.发生这种情况是因为您将body限制为 height:100% 的html ，而限制为 height:100% 的屏幕。 To fix this simply use min-height instead of height within the body:要解决这个问题，只需使用min-height而不是 body 内的height ：
html { margin: 0; padding: 0; height: 100%; color: #fff; } body { margin: 0; padding: 0; min-height: 100%; border:1px solid green; } .project { display: flex; flex-wrap: wrap; justify-content: center; } .prototype-box { width: 400px; height: 200px; border:1px solid red; }
<div class="project"> <div class="prototype-box"> 1 </div> <div class="prototype-box"> 2 </div> <div class="prototype-box"> 3 </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.