Question

我的父div的固定高度较大，子div的高度较小。我想知道是否可以在插入子div时将父div调整为200 px。

<div class="parent">
  <div class="child"></div>
</div>


.parent {
    position: relative;
    height: 400px auto;
}

.child {
    height: 200px;
}

Answer 1

只需将高度自动分配给父div。它将自动采用子div的高度。而且height: 400px auto无效，因为它是无效的CSS语法。

.parent {
    position: relative;
    height: auto;
}

.child {
    height: 200px;
}

Answer 2

从技术上讲，使用:empty伪类BUT当前实现是可能，但当前实现要求.parent元素中没有内容或空白。

:empty @ MDN

然后，我们可以在父级上定义一个固定的高度，如果父级中有内容，则将其切换为auto。

像这样：

.parent {
  width: 50%;
  height: 100px;
  margin: 1em auto;
  border: 2px solid red;
  background: orange;
}

.parent:not(:empty) {
  height: auto;
  background: pink;
}

.child {
  height: 50px;
}

<div class="parent"></div>

<div class="parent">
  <div class="child"></div>
</div>

Answer 3

只需将父div的高度设置为'auto'

.parent {
position: relative;
height: auto;
}

如何根据子高度调整固定高度的父div？

3 个答案: