Question

我想创建一个具有可变高度的简单弹出窗口，如果它小于视口，它将垂直居中，并且当它大于视口时不会收缩。以下是示例代码：

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-child {
  flex-shrink: 0;
}
.item {
  height: 160px;
  background-color: #C3C3FC;
  border: 1px solid red;
}

<div class="flex-container">
  <div class="flex-child">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 1

请注意，Flex容器上的height: 100%会被忽略，因为其包含的块（body）具有height: auto。

因此，flex容器的高度将是其内容的高度，因此justify-content: center将不会被注意到。

要修复它，您可以为body添加固定高度：

html, body {
  height: 100%;
  margin: 0;
}

但是，如果内容比视口高，结果将是不合需要的，因为你有justify-content: center，内容将从上方和下方溢出，但滚动条将不允许看到以上溢出。

因此，您不应该为弹性容器使用固定高度，只需要一个最小高度，以便在必要时允许它增长：

.flex-container {
  min-height: 100%;
  height: auto; /* Initial value */
}

html, body {
  height: 100%;
  margin: 0;
}
.flex-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-child {
  flex-shrink: 0;
}
.item {
  height: 160px;
  background-color: #C3C3FC;
  border: 1px solid red;
}

<div class="flex-container">
  <div class="flex-child">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>
</div>

防止物品收缩

1 个答案: