如何使用 Flexbox 填充页面底部的所有空白空间？答案

【问题标题】：How do you use Flexbox to fill all the empty space on the bottom of the page?如何使用 Flexbox 填充页面底部的所有空白空间？
【发布时间】：2022-01-23 07:07:00
【问题描述】：

这是我的代码：

.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  flex: 1;
  background-color: pink;
}

<div class="content">
  <div class="main">
    <p>This is a test!</p>
  </div>
</div>

但是，这只会创建一个框，上面写着“这是一个测试！”粉红色的盒子下面是一堆空白的空间。我希望弹性盒子用粉红色完全填充它下面的所有东西。我该怎么做？

我已经尝试过 align-items: stretch 和其他十亿种方法，但我似乎无法让它发挥作用。

我还是 flexbox 的新手，所以如果我可能遗漏一些基本知识，请告诉我。

【问题讨论】：

您提供的代码似乎缺少</div>。我认为只是你在复制/粘贴时错过了它，所以我将它添加到 sn-p. 但是，我建议你让 sn-p 准确地显示“填充它下面的所有内容”，以及你拥有的其他标签，并且在帮助你时更准确

标签： html css flexbox

【解决方案1】：

将背景色直接添加到弹性容器中。你也应该添加一个min-height，比如min-height: 100vh。默认情况下，flex-container 只会使用 aheight 来适应内容。

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: pink;
  min-height: 100vh;
}

.main {
  flex: 1;  
}

body {
  margin: 0;
}

<div class="content">
  <div class="main">
    <p>This is a test!</p>
  </div>
</div>

【讨论】：

在您的示例中，您已将背景颜色移至父元素，而不是像在原始问题中那样将其放在“.main”中。也许您可以为此添加解释？
@Chique 因为背景颜色适用于子元素。因此，背景颜色不会拉伸以填充整个父元素，而只会填充子元素的大小。如果让子元素拉伸以填充整个父元素。但随后justify-content 和 align-items` 都将变得无用。文本将不再居中，而是位于左上角。

【解决方案2】：

因此，为了让子 .main div 拉伸整个高度，父 .content 需要有一个定义的高度。最简单的方法是为其添加一个最小高度（最小高度）。在您的情况下，如果我说对了，您希望它延伸到整个页面，因此我们添加了 100vh 的最小高度。这里的“vh”单位代表视口高度（more on CSS units）。

现在我们已经使内容全高，有两种方法可以使子.main div 覆盖“flexbox”.content 的整个区域。您可以在.content（父）上使用align-items: stretch，也可以在子.main 上使用align-self: stretch。

这里我使用了第二个选项。在您的情况下两者的工作方式相同，但如果您需要放置其他物品，那么您可以选择其中一种而不是另一种方法。

.content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height:100vh;
}

.main {
    flex: 1;
    background-color: pink;
    align-self:stretch;
}

<div class="content">
    <div class="main">
        <p>This is a test!</p>
    </div>
</div>

注意：如果您在此处运行示例，您可能会看到粉红色区域周围有一个白色边框，它来自具有默认填充/边距的 HTML 的 body。要摆脱这种情况，您可以在 body 元素上添加 padding:0; margin:0;。但这与您的实际问题或解决方案无关。

【讨论】：