Question

考虑以下代码：

.container {
  display: flex;
  flex-direction: column;
}

.header {
  flex: 1;
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
  height: 100%;
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

为什么我的CONTENT不能达到可用高度（从HEADER底部到页面底部）？怎么解决呢？

Answer 1

我要用这个答案来清除注释中提到的一些内容，如果由于问题已经有了答案而不合适，我将删除它。

通过进行我建议的更改，我们将.container的高度设置为100vh，以明确地定义它必须具有完整视口的高度，否则， .container仅具有所需的高度才能包含其中的元素。

这对body和html元素同样适用。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 1;
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

使用百分比定义height或width需要一些引用来计算%单位的空间；例如：

如果我们为.container设置了1000px的宽度，我们可以将其子级的宽度设置为50％和100％，它们的大小将相应地调整为500px和1000px，因为它们具有来自其父级的1000px引用。

编辑：正如@Temani所指出的，此引用始终存在于width属性中，因此即使我们未指定显式的宽度，对宽度使用百分比也不会失败。父容器中的宽度。

.container {
  display: flex;
  flex-direction: column;
  width: 1000px;
}

.header {
  flex: 1;
  width: 50%;
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
  width: 100%
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

height属性也是如此；我们定义一个特定的父母的身高，孩子的身高可以用百分比设置，因为现在他们有了参考。

.container {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.header {
  height: 20%;
  background-color: red;
}

.content {
  background-color: blue;
  height: 80%
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

Answer 2

您的容器缺少高度，您可以使用height:100vh;来填充窗口的高度。

您还可以使用％，但是您需要从父级继承有效值。在这种情况下，它可以取自html，发送至正文，最后由您的容器使用：（{example in this duplicate）

html,body,.container {height:100%;}

带有vh的示例

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  /*or min-height*/      height: 100vh;
}

.header {
  /* flex: 1; not needed */
  background-color: red;
}

.content {
  flex: 1;
  background-color: blue;
  /*height: 100%; not needed */
}

<div class="container">
  <div class="header">
    <h1>HEADER</h1>
  </div>
  <div class="content">
    <h1>CONTENT</h1>
  </div>
</div>

Answer 3

这将取决于您最终要完成的页面内容以及如何使用页面。

您可以设置.container的整页宽度和高度：

.container {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

然后根据需要增加/缩小容器：

.header{ flex: 1 }
.content { flex: 2 } // twice as large as header

Answer 4

@ ivanS95如何说“ .container仅具有基于其内容的高度”。取而代之的是，您可以通过将所有父元素（html，body）设置为100％，也将.container设置为100％，并更改.header的弹性属性，使其不允许增长来实现。

此处示例：

flex: 0 1;

https://codepen.io/pen/

@Pebbl之前曾在以下位置很好地回答过这个问题：

Make a div fill the height of the remaining screen space

请检查一下。

如何设置弹性柱子到最大可用高度？

4 个答案: