为什么我的 div 没有占据其父容器的 100% 高度？答案

【问题标题】：Why is my div not taking up 100% height of its parent container?为什么我的 div 没有占据其父容器的 100% 高度？
【发布时间】：2017-04-24 12:58:42
【问题描述】：

这里有点混乱。我很累，所以我确定我犯了一个愚蠢的错误，但这是我的 HTML/CSS：

.CAContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
}
.CASideBorder {
  height: 100%;
  background: #000;
  width: 8px;
}
.CAMiddleContainer {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.CATopBorder {
  height: 8px;
  background: #000;
  width: 100%;
}
.CAMiddleTextContainer {
  padding: 40px 80px 40px 80px;
  font-size: 4em;
  color: #000;
}
.CABottomBorderContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8px;
}
.CABottomBorderLeft,
.CABottomBorderRight {
  flex: 1;
  height: 100%;
  background: #000;
}

<div class="CAContainer">
  <div class="CASideBorder" id="CALeftBorder"></div>
  <div class="CAMiddleContainer">
    <div class="CATopBorder"></div>
    <div class="CAMiddleTextContainer">
      text
    </div>
    <div class="CABottomBorderContainer">
      <div class="CABottomBorderLeft"></div>
      <div class="CABottomBorderRight"></div>
    </div>
  </div>
  <div class="CASideBorder" id="CARightBorder"></div>
</div>

还有fiddle。

CASideBorder 不应该占据其父容器的 100%，它的高度由CAMiddleTextContainer 的文本大小和填充计算？我在这里错过了一些非常明显的东西吗？任何帮助表示赞赏。

【问题讨论】：

使用 vh 代替百分比
只有当容器在 px/%/em/rem 中声明了高度时，内容的 100% 高度才会起作用。 DOM 将其计算为 100%，这就是为什么它没有显示，因为没有基本高度

标签： html css flexbox vertical-alignment

【解决方案1】：

那是因为你有align-items: center 用于弹性框，在这种情况下它将默认为内容高度。

您需要做的是删除它（让align-items: stretch 发挥作用，因为它是默认设置）并从CASideBorder 中删除height:100%。

请看下面的演示：

.CAContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.CASideBorder {
  background: #000;
  width: 8px;
}

.CAMiddleContainer {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.CATopBorder {
  height: 8px;
  background: #000;
  width: 100%;
}

.CAMiddleTextContainer {
  padding: 40px 80px 40px 80px;
  font-size: 4em;
  color: #000;
}

.CABottomBorderContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 8px;
}

.CABottomBorderLeft, .CABottomBorderRight {
  flex: 1;
  height: 100%;
  background: #000;
}

<div class="CAContainer">
  <div class="CASideBorder" id="CALeftBorder"></div>
  <div class="CAMiddleContainer">
    <div class="CATopBorder"></div>
    <div class="CAMiddleTextContainer">
      text
    </div>
    <div class="CABottomBorderContainer">
      <div class="CABottomBorderLeft"></div>
      <div class="CABottomBorderRight"></div>
    </div>
  </div>
  <div class="CASideBorder" id="CARightBorder"></div>
</div>

【讨论】：

啊，不知道对齐项：居中。谢谢！完美运行:^)