Question

我有一个带填充的父div，里面有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布局可以实现预期的行为，如下面嵌入的代码段所示。

解决方案细分：

#parent - 声明flex包含父元素，以及 flex-wrap以便嵌套元素可以占据整个宽度容器，我们想在这里维护行方向。
.a - 在此嵌套元素上声明flex-basis;是的等于宣布width: 100% - 我们希望它保留下来全宽，以便下面的兄弟元素（.b）包装到a 新行。
.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仅限于不支持旧版浏览器（如I.E）以获得完整的浏览器支持和兼容性，请参阅上述任一备选方案。

请参阅浏览器兼容性：

caniuse.com
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>

更新后的代码段演示了一个带列方向的替代解决方案。 伪元素 #parent:after已被删除，因为它否定了任何尝试实现您的问题中指定的行为（如果任何形状需要此伪元素或形式，考虑更新您的问题，以明确说明其功能和/或角色）。

CSS相对孩子取父

2 个答案: