Question

我正在尝试将子div高度100％设置为父div。由于它是一种风格的东西，我不想使用JS/JQ，这应该在CSS中完成。这是Link of Code，这是片段：

HTML：

<div class="a">
  <div class="c"></div>
  <div class="b"></div>
</div>

CSS：

.a{
  float: left;
  background: red;
  padding-right: 1px;
  height: 100%;
}
.b{
  position: relative;
  float: left;
  background: blue;
  display: table;
  height: 100%;
  width: 29px;
}
.c{
  height: 300px;
  width: 90px;
  background: grey;
  float: left;
}

请不要使用Position: Absolute/Relative，这在我目前的代码结构中不适合我

Answer 1

如果父元素的高度已知（和/或可计算），则

height:100%仅适用于元素。

如果.a的父级没有指定/继承的高度，则height: 100%对其没有影响（因此height: 100%上的.b也有没有效果，因为.a没有指定/可计算的高度。）

或者，您可以使用flexbox轻松完成此操作（浏览器支持是IE10 +以及其他所有内容）：

.a{
  float: left;
  background: red;
  padding-right: 1px;
  display: flex;
}
.b{
  background: blue;
  width: 29px;
}
.c{
  height: 300px;
  width: 90px;
  background: grey;
}

<div class="a">
  <div class="c">c</div>
  <div class="b">b</div>
</div>

Answer 2

您可以将包装器div设为display: table，子设备的行为为display: table-cell。这将等于孩子们的身高：

.a{
  float: left;
  background: red;
  display: table;
}
.b{
  display: table-cell;
  background: blue;
  width: 29px;
}
.c{
  display: table-cell;
  height: 300px;
  width: 90px;
  background: grey;
}

<div class="a">
  <div class="c">c</div>
  <div class="b">b</div>
</div>

Answer 3

另一种方法，而不是浮动和display: table，display: flex。

您可以在容器上使用display: flex，在孩子身上使用flex: grow。

以下链接更详细地解释了该过程：

https://css-tricks.com/boxes-fill-height-dont-squish/

通过仅使用CSS而不使用JS将子高度设置为父div

3 个答案: