将相对 div 拉伸到其静态父级的高度答案

【问题标题】：Stretch a relative div to the height of its static parent将相对 div 拉伸到其静态父级的高度
【发布时间】：2019-09-09 23:53:16
【问题描述】：

我有一个 div（红色框），它位于水平弹性框（黑色轮廓）中。它的高度是根据 flex box 中其他东西的高度来计算的，在这种情况下是高大的蓝色盒子；这一切都很好。

红色的 div 有一个孩子——图片中的绿色框。它相对于红色框定位。我希望绿色盒子通常完全覆盖红色盒子。宽度没问题，因为红色框的宽度是固定的。但是我怎么能说绿色盒子的高度应该等于它的父红色盒子的高度呢？

红框上面绿框的原因是我希望绿框在悬停的时候横向展开，但是我不希望这个展开影响其他元素的布局。像这样：

有一个JSFiddle here

div.dropZone {
  position: relative;
  font-family: serif;
  margin: 0px;
  border-radius: 5px;
  left: 0px;
  top: 0px;
  width: 2em;
  height: inherit;
  min-height: 3ex;
  background-color: green;
}

div.dropZone:hover {
  width: 4em;
  left: -1em;
}

div.dzContainer {
  position: static;
  font-family: serif;
  margin: 0px 0px 0px 0px;
  -webkit-align-self: stretch;
  align-self: stretch;
  width: 2em;
  height: auto;
  min-height: 3ex;
  background-color: red;
}

div.tall {
  position: static;
  font-family: serif;
  margin: 0px 0px 0px 0px;
  -webkit-align-self: stretch;
  align-self: stretch;
  background-color: blue;
  width: 3em;
  height: 10ex;
}

.H {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  border: 1px solid black;
}

<div class="H">
  <!-- black flex-->
  <div class="tall"> </div>
  <!-- blue static-->
  <div class="dzContainer">
    <!-- red static-->
    <div class="dropZone"> </div>
    <!-- green relative-->
  </div>
  <div class="tall"> </div>
  <!-- blue static-->
</div>

【问题讨论】：

height: 100% on dropZone?
我看不到绝对的孩子？ ...在我尝试解释之前，您是否在例如 Safari 11 上尝试过给定的解决方案？
这就是为什么我建议使用display: flex。在使用 Flexbox 时，通常使用带有百分比值的height 是一个坏主意，主要原因是当孩子使用它时，它的父母需要设置高度，而大多数情况下不是这样想。嵌套 flex 父/子是一个更好的跨浏览器解决方案。例如。像这样：jsfiddle.net/kzL693ex
理论是，默认情况下，flex 子项将在 flex 行方向上拉伸以填充其父项的高度 (align-items: stretch)，这就是它的工作原理。
不需要添加另一个答案。我的这 3 个答案都描述并展示了它是如何工作的（如果你觉得没问题，可能会重复）。 stackoverflow.com/questions/46954952/… ... stackoverflow.com/questions/46997189/why-height-100-doesnt-work/… ... stackoverflow.com/questions/47839762/…

标签： html css flexbox

【解决方案1】：

如果你想让绿色框填充父高度，添加高度：100%；到 .dropZone 类。

div.dropZone {
  position: relative;
  font-family: serif;
  margin: 0px;
  border-radius: 5px;
  left: 0px;
  top: 0px;
  width: 2em;
  height: 100%;
  min-height: 3ex;
  background-color: green;
}

【讨论】：

这个答案得到 100%。
请注意，我最终接受了@LGSon 的建议。请参阅问题下的评论主题。

【解决方案2】：

您只需在 CSS 中进行一项更改。将“height:100%”添加到您的 div.dropZone 选择器。我希望这会有所帮助。

你可以运行下面的代码sn-p来试一试。

div.dropZone {
    position: relative;
    font-family: serif;
    margin: 0px;
    border-radius: 5px;
    left: 0px;
    top: 0px;
    width: 2em;
    height: inherit;
    min-height: 3ex;
    background-color: green;
    height: 100%;
}

div.dropZone:hover {
  width: 4em;
  left: -1em;
}

div.dzContainer {
    position: static;
    font-family: serif;
    margin: 0px 0px 0px 0px;
    -webkit-align-self: stretch;
    align-self: stretch;
    width: 2em;
    height: auto;
    min-height: 3ex;
    background-color: red;
}

div.tall {
    position: static;
    font-family: serif;
    margin: 0px 0px 0px 0px;
    -webkit-align-self: stretch;
    align-self: stretch;
    background-color: blue;
    width: 3em;
    height: 10ex;
}

.H {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    border: 1px solid black;
}

   <div class="H">                      <!-- black flex-->
    <div class="tall"> </div>          <!-- blue static-->
    <div class="dzContainer">           <!-- red static-->
        <div class="dropZone"> </div>   <!-- green relative-->
    </div>
    <div class="tall"> </div>          <!-- blue static-->
   </div>

【讨论】：