Question

我知道一个解决方案是将父元素设置为相对，将子元素设置为绝对。任何人都可以使用更灵活的方式吗？（请勿使用绝对值）

请不要轻易将问题标记为Make flexbox children 100% height of their parent

因为我尝试了@David Storey在该线程中提到的flex方法，看来我只能使其在flex-direction：行布局中工作，而无法在我的提琴中工作（flex-direction：列）布局。

HTML：

<div class="d-flex flex-column h-100">
  <div class="p-2 d1">Flex item 1</div>
  <div class="p-2 d6 flex-grow-1 d-flex position-relative">
    <div class="inner h-100 flex-grow-1">
      background-color: green;
    </div>
  </div>
</div>

CSS：

html,body{
  height: 100%;
}
.d1 {
  background-color: yellow;
}
.d6 {
  background-color: green;
}
.inner {
  background-color: red;
}

fiddle

Answer 1

如果将内部框的父级的高度设置为100％，则内部框将拉伸整个高度。

Answer 2

孩子需要将哪个元素设置为100％吗？因此，您必须将h-100设置为父类而不是子类。

h-100

jsfiddle

如何使用bootstrap flex方法使内盒占据其父代的全部高度？

2 个答案: