制作 children parent 弹性框的全高 css

Question

我试图让 children 元素占据 parent div 的全部高度。我已经根据堆栈溢出的其他答案尝试了各种方法，但似乎没有任何效果。

我试过将 align-items: stretch 设置为 parent，将 align-self: stretch 设置为 children，将 height: 100% 设置为 children。我错过了什么？

HTML

<div class="parent">   
  <div class="child blue">
    content...
  </div>
  <div class="child red">
      content...
  </div>
  <div class="child yellow">
      content...
  </div>
</div>

CSS

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.child {
  display: flex;
  height: 100%;
  align-self: stretch;
}

Fiddle 示例：https://jsfiddle.net/f8zxc4go/

Answer 1

为 .child 做这 3 件事：

移除height: 100%
删除align-items: stretch
使用flex-grow: 1

并从 .parent 中删除 align-items: stretch; 和 flex-direction:row;。

.parent {
  display: flex;
  /* flex-direction: row; */
  border: thin solid orange;
  margin: 5px;
  padding: 5px;
  /* align-items: stretch; */
}

.child {
  display: flex;
  /*  height: 100%; */
  
  flex-grow: 1; /* NEW */
  
  width: 25%;
  /*  align-self: stretch; */
}

.child.blue {
  background: blue;
}

.child.red {
  background: red;
}

.child.yellow {
  background: yellow;
}

.child.green {
  background: green;
}

<div class="parent">
  <div class="child green">
    <p>
      this is some content
    </p>
  </div>
  <div class="child blue">
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
  </div>
  <div class="child red">
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
  </div>
  <div class="child yellow">
    <p>
      this is some content
    </p>
  </div>
</div>

参考：

flex-grow: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

您可能会发现此答案也很有帮助。

flexbox 方法：

Answer 2

而不是 height: 100% 使用 min-height: 100%.

在下面的示例中，第一行有 .child {min-height:100%}
第二行和 OP 一样 .orphan {height: 100%}。

注意：如果全屏查看，内容将有足够的空间均匀分布。为了查看两行之间的差异，请将 window 的大小调整为较小的大小，或者向部分或所有列添加更多文本。

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.child {
  display: flex;
  min-height: 100%;
  align-self: stretch;
}

.orphan {
  display: flex;
  height: 100%;
  align-self: stretch;
}

section:first-child {
  background: blue;
  color: gold
}

section:nth-child(2) {
  background: gold;
  color: blue;
}

section:nth-child(3) {
  background: red;
  color: white
}

section:last-child {
  background: green;
  color: white
}

<main class='parent'>
  <section class='child'>
    My sister died in the spaghetti. Your special time is your power. It makes you strong like a boob. I going to daughter your brains out, bitch. Who cares, Morty? Global acts of terrorism happen every day. Uh, here's something that's never happened before—I'm
    a pickle! I'm Pickle Ri-i-i-ick!
  </section>
  <section class='child'>
    Flip the pickle over. Rick, is this a Saw thing? Are you seriously Sawing the Vindicators? Is he keeping his shoulders square? Oooooooh he's tryin'! And that's why I always say 'Shumshumschilpiddydah!'
  </section>
  <section class='child'>
    I'm Mr. Crowbar, and here is my friend, who is also a crowbar! It's called carpe diem Morty. Look it up. What about the reality where Hitler cured cancer, Morty? The answer is: Don't think about it. 5 more minute of this and I'm going to get mad!
  </section>
  <section class='child'>
    Yeah, sure, I mean, if you spend all day shuffling words around, you can make anything sound bad. I was just killing some snaked up here like everyone else, I guess, and finishing the Christmas lights. You're growing up fast, Morty. You're going into
    a great big thorn straight into my ass. Pluto's a planet.
  </section>
</main>

<hr>

<div class='parent'>
  <section class='orphan'>
    My sister died in the spaghetti. Your special time is your power. It makes you strong like a boob. I going to daughter your brains out, bitch. Who cares, Morty? Global acts of terrorism happen every day. Uh, here's something that's never happened before—I'm
    a pickle! I'm Pickle Ri-i-i-ick!
  </section>
  <section class='orphan'>
    Flip the pickle over. Rick, is this a Saw thing? Are you seriously Sawing the Vindicators? Is he keeping his shoulders square? Oooooooh he's tryin'! And that's why I always say 'Shumshumschilpiddydah!'
  </section>
  <section class='orphan'>
    I'm Mr. Crowbar, and here is my friend, who is also a crowbar! It's called carpe diem Morty. Look it up. What about the reality where Hitler cured cancer, Morty? The answer is: Don't think about it. 5 more minute of this and I'm going to get mad!
  </section>
  <section class='orphan'>
    Yeah, sure, I mean, if you spend all day shuffling words around, you can make anything sound bad. I was just killing some snaked up here like everyone else, I guess, and finishing the Christmas lights. You're growing up fast, Morty. You're going into
    a great big thorn straight into my ass. Pluto's a planet.
  </section>
</div>

Answer 3

你的方向是正确的。只有两个小的变化。如果您删除子 class 的高度并将 align-self: stretch; 更改为 align-items: stretch;.

，则可以做到这一点

.child {
  display: flex;  
  width: 25%;
  align-items: stretch;
}

.parent {
  display: flex;
  flex-direction: row;
  border: thin solid orange;
  margin: 5px;
  padding: 5px;
  /* align-items: stretch;  remove. not necessary */ 
}

.child {
  display: flex;  
  width: 25%;
  align-items: stretch;
}

.child.blue {
  background: blue;
}

.child.red {
  background: red;
}

.child.yellow {
  background: yellow;
}

.child.green {
  background: green;
}

<div class="parent">
  <div class="child green">
    <p>
    this is some content
    </p>
  </div>
  <div class="child blue">
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
  </div>
  <div class="child red">
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
    <p>
    this is some content
    </p>
  </div>
  <div class="child yellow">
    <p>
    this is some content
    </p>
  </div>
</div>

制作 children parent 弹性框的全高 css

Make children full height of parent flex box css

css

flexbox

参考：