来源

Question

让一个包含第二部分的部分成为一个部分。第一个没有明显的CSS规则。第二个由其宽度和高度定义。两者都是彩色的。

将几个像素的Y平移应用于子分区，如下所示：

HTML

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

#parent {
  background: red;
}

#child {
  background: yellow;
  width: 100px;
  height: 100px;
  transform: translateY(253px);
}

我们希望父分区的高度随着子分区的移动而增加。如何获得这样的结果？可以使用transform：translateY（xyz），但不是必须的。

Answer 1

将margin-top: 90px;添加到子项并添加padding-top: 1px。希望这是您想要的。谢谢

链接以供参考。

Answer 2

我们希望父分区的高度随着子分区的移动而增加。这样的结果如何实现？

使用转换是不可能的，因为这样可以保留元素原本会保留的空间，但不会使元素在新位置保留空间。

如果您通过margin-top: 253px;来移动孩子，则可以使孩子成长。（当然，这会导致边际利润出现这种情况，但是可以通过设置父级inline-block或设置overflow:hidden来解决。）