CSS相对孩子为父母的身高

Question

我有一个带有填充物的父级，里面有2个孩子。我想让第二个孩子B占据父母的其余部分（减去div a）。如果不存在div a，则比所有高度占用。（使用相同的CSS！）

#parent {
  position: relative;
  left: 0;
  max-width: 500px;
  max-height: 200px;
  background: #333;
  top: 0;
  overflow: hidden;
}
#parent:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.a {
   position: relative;
  height: 20px;
  width: 100%;
  background: red;
}
.b {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blue;
  overflow: hidden;
}

<div id="parent">
  <div class="a">1 </div>
  <div class="b">2 </div>
</div>

---

编辑：

为什么问题被拒绝？这个问题怎么了？我该怎么问，而不会被拒绝？

Answer 1

您可以将view-height CSS单元用于DIV b。代码的示例。如果删除DIV a，您会注意到Div b将占所有height。

#parent {
  position: relative;
  left: 0;
  max-width: 500px;
  max-height: 200px;
  background: #333;
  top: 0;
  overflow: hidden;
}
#parent:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.a {
   position: relative;
  height: 20px;
  width: 100%;
  background: red;
}
.b {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: blue;
  overflow: hidden;
}

<div id="parent">
  <div class="a">1 </div>
  <div class="b">2 </div>
</div>

Answer 2

可以使用flex-box布局来实现预期的行为，如嵌入的代码段中所示。

解决方案分解：

1. #parent-在包含父元素上声明 flex，以及 flex-wrap，以便嵌套的元素可以占据容器，我们想在此处维护行向。
2. .a-在此嵌套元素上声明flex-basis；就是宣布width: 100%的Tantamount-我们希望它保留全宽，以便以下兄弟姐妹元素（.b）将新行。
3. .b-声明速记属性 flex: 1 1以指定该元素应占据其全部宽度和高度包含元素，但不超过它。flex ¹ 属性是一个flex-shrink的速记 ² ， flex-grow ³ ，和flex-basis ⁴

#parent {
  position: relative;
  left: 0;
  max-width: 500px;
  max-height: 200px;
  background: #333;
  top: 0;
  overflow: hidden;
  /* additional */
  display: flex;
  flex-wrap: wrap;
}
#parent:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.a {
  position: relative;
  height: 20px;
  background: red;
  /* additional */
  flex-basis: 100%;
}
.b {
  position: relative;
  background: blue;
  /* additional */
  flex: 1 1;
}

<div id="parent">
  <div class="a">1</div>
  <div class="b">2</div>
</div>
<br>
<div id="parent">
  <div class="b">2</div>
</div>

flex-box上的注释：
由于flex-box不限于支持旧浏览器（例如）以提供完整的浏览器支持和兼容性，请参阅上述任何一种替代方案。

请参阅浏览器兼容性：

1. caniuse.com
2. Flex -CSS |mdn

编辑

更新

#parent {
  position: relative;
  left: 0;
  max-width: 500px;
  max-height: 200px;
  background: #333;
  top: 0;
  overflow: hidden;
  /* additional */
  display: flex;
  flex-direction: column;
  height: 200px; /* an absolute height value is required for relative flex-box heights */
}
/*#parent:after { kill the interloper
  padding-top: 56.25%;
  display: block;
  content: '';
}*/
.a {
  position: relative;
  height: 20px;
  background: red;
}
.b {
  position: relative;
  background: blue;
  /* additional */
  flex: 1 1;
}

<div id="parent">
  <div class="a">1</div>
  <div class="b">2</div>
</div>
<br>
<div id="parent">
  <div class="b">2</div>
</div>

更新的片段用A 列方向演示了替代解决方案。 pseudo-element #parent:after已被删除，因为它否定了实现问题中指定的行为的任何尝试（如果此 pseudo-element 需要任何形状或形式，请考虑更新您的问题，以清晰的解释有关其功能和或角色）。