如何在不使用flexbox的情况下使<div>填充剩余高度？

Question

我有这样的html布局：

,-------------.
|,-----------.|
|| child 1   ||
|`-----------'|
|,-----------.|
|| child 2   ||
||           ||
||           ||
||           ||
||           ||
|`-----------'|
`-------------'

容器的高度值为100vh，而child 1的高度固定。我希望child 2自动填充剩余的高度。

我知道有一个flexbox解决方案：

.container { 
    display: flex;
    flex-direction: column;
}
.child-1 {
    flex-shrink: 0;
    flex-grow: 0;
}
.child-2 {
    flex-grow: 1;
}

该解决方案可以单独使用，但如果我想在child 3内使用child 2的第三个孩子height: 100%，则会失败。我需要child 2展开并将child 3设置为flex-grow: 1。

随着嵌套的深入，这种弹性继承变得非常令人沮丧。它也违反了“关注点分离”，因为DOM结构仅在所有节点都正确设置为display: flex时才有效。

以下是jsfiddle演示此问题。

html,
body {
  margin: 0;
}

div {
  width: 100%;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.child-1 {
  height: 50px;
  flex-shrink: 0;
  flex-grow: 0;
}

.child-2 {
  flex-grow: 1;
}

.child-3 {
  height: 80%;
}


/* irrelevant styles like background-color etc. */

.container.irrelevant {
  width: 100px;
  background: green;
  float: left;
  margin-right: 20px;
}

.child-1.irrelevant {
  background: red;
}

.child-2.irrelevant {
  background: magenta;
}

.child-3.irrelevant {
  background: yellow;
}

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2<br> Seems like it works
  </div>
</div>

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2
    <div class="child-3 irrelevant">
      But it doesn't, child 3 should fill 80% height of the child 2.
    </div>
  </div>
</div>

Answer 1

哦，你可以使用calc。像这样的东西;

.child-2 { height: calc(100vh - 100px); }

假设.child-1的固定高度为100px。

如果你想要更有活力的东西使用@ patelarpan的解决方案，但这很快捷（而且不脏）。

Answer 2

将height: 100%添加到子级2。

您也可以使用CSS grid，但并非所有浏览器都支持它。

＆＃13;

＆＃13;

html,
body {
  margin: 0;
}

div {
  width: 100%;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.child-1 {
  height: 50px;
  flex-shrink: 0;
  flex-grow: 0;
}

.child-2 {
  flex-grow: 1;
  height: calc(100% - 50px); /* add this line */
}

.child-3 {
  height: 80%;
}


/* irrelevant styles like background-color etc. */

.container.irrelevant {
  width: 100px;
  background: green;
  float: left;
  margin-right: 20px;
}

.child-1.irrelevant {
  background: red;
}

.child-2.irrelevant {
  background: magenta;
}

.child-3.irrelevant {
  background: yellow;
}

＆＃13;

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2<br> Seems like it works
  </div>
</div>

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2
    <div class="child-3 irrelevant">
      But it doesn't, child 3 should fill 80% height of the child 2.
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

似乎.child-3无法正确计算父级身高，除非已设置flex-basis。因此，您可以使用flex: 1 DEMO上的child-2或仅添加flex-basis: 0% DEMO来解决此问题，这与浏览器在您使用时的操作相同flex: 1。

html,
body {
  margin: 0;
}

div {
  width: 100%;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.child-1 {
  flex: 1;
  height: 50px;
  flex-shrink: 0;
  flex-grow: 0;
}

.child-2 {
  flex: 1;
}

.child-3 {
  height: 80%;
}


/* irrelevant styles like background-color etc. */

.container.irrelevant {
  width: 100px;
  background: green;
  float: left;
  margin-right: 20px;
}

.child-1.irrelevant {
  background: red;
}

.child-2.irrelevant {
  background: magenta;
}

.child-3.irrelevant {
  background: yellow;
}

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2<br> Seems like it works
  </div>
</div>

<div class="container irrelevant">
  <div class="child-1 irrelevant">
    Child 1
  </div>
  <div class="child-2 irrelevant">
    Child 2
    <div class="child-3 irrelevant">
      But it doesn't, child 3 should fill 80% height of the child 2.
    </div>
  </div>
</div>