仅使用 CSS 而没有 JS [重复] 将子元素的高度设置为父 div

Posted 2023-03-06

【中文标题】仅使用 CSS 而没有 JS [重复] 将子元素的高度设置为父 div

【英文标题】：Setting the height of child to parent div by using only CSS and without JS [duplicate]

【发布时间】：2015-06-16 10:57:48

【问题描述】：

我正在尝试将子 div 高度 100% 设置为父 div。因为它是一个风格的东西，我不想使用JS/JQ，这应该在CSS中完成。这是Link of Code 这是sn-p：

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，在我当前的代码结构中，这不是我的选择

【问题讨论】：

How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height? 的可能重复项 - 也可能是 CSS - Expand child DIV height to parent's height 的重复项 - 请注意，接受的答案并不总是提供最多信息的答案。

【参考方案1】：

height:100% 仅适用于父元素的高度已知（和/或可计算）的元素。

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

或者，您可以使用 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>

【讨论】：

除了使用绝对位置还有什么办法吗？

@BharatSoni 你是什么意思？ Adam 没有使用绝对位置 - 他使用的是flexible boxes。

@showdev 我的意思是，既没有指定高度，也没有使用绝对位置对我来说是选项。那么有没有其他方法可以解决这个问题

@BharatSoni Adam 上面显示的解决方案既没有指定父级高度，也没有使用绝对位置。

现在他编辑了答案:) :) 它对我有用:)

【参考方案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>

【参考方案3】：

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

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

这是一个更详细地解释该过程的链接：

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