Question

我有flex-wrap div和里面的几个项目。但是，当屏幕变小时，机身高度无法跟随其高度并在底部留出空间。为什么会发生以及如何解决？

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

Answer 1

尽量不要触摸身体，并将flex div插入包装div中。这样就可以留出间距。您可以在这里参考我的笔。

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>

Answer 2

您使用px到height是绝对的。因此，例如200px在任何屏幕上实际上都是200个像素。因此，如果车身高度较小，则默认情况下将显示600px（200px+200px+200px）滚动（overflow-y）...

如果希望它们适合body's height，则必须将%/vh设置为height

百分比（％）：相对于父值。

视口高度（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>

Answer 3

发生这种情况是因为您将body的高度限制为html的高度的100％，而min-height的高度限制为屏幕的高度：100％。要解决此问题，只需在正文中使用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>

if any(item in q for item in d) :

当内容在身体高度上弯曲包装时，CSS会有额外的间距

3 个答案: