【问题标题】：How to use transform: translateY on a child while automatically resizing the parent?如何在自动调整父级大小的同时在子级上使用 transform: translateY？
【发布时间】：2019-01-25 11:12:32
【问题描述】：

设是一个包含第二个部门的部门。第一个没有显着的 CSS 规则；第二个由它的宽度和高度定义。两者都是彩色的。

对子分割应用几个像素的 Y 平移，如下所示：

来源

HTML

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

CSS

#parent {
  background: red;
}

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

问题

我们希望父分区看到它的高度根据其子分区的移动而增加。怎么可能达到这样的结果？使用 transform: translateY(xyz) 是可取的，但不是必需的。

【问题讨论】：

使用变换是不可能的，因为它保留了元素原本会占用的空间，但它不会让它在新位置占用空间。如果您通过margin-top: 253px; 移动孩子，您可以让父母成长。（当然，这会导致页边距崩溃的情况，但这可以通过使父级内联块或设置溢出：隐藏来解决。）
谢谢。你应该写一个答案！

标签： css css-transforms

【解决方案1】：

我们希望父分区看到它的高度根据其子分区的移动而增加。怎么可能达到这样的效果？

使用变换是不可能的，因为这会保留元素原本会占用的空间，但不会让它在新位置占用空间。

如果您改为通过margin-top: 253px; 移动孩子，您可以让父母成长。（当然，这会导致 利润率下降，但这可以通过设置父级 inline-block 或设置 overflow:hidden 来解决。）

【讨论】：

【解决方案2】：

将margin-top: 90px; 添加到孩子并添加padding-top: 1px。希望这就是你要找的。谢谢

参考链接。

https://codepen.io/Xenio/pen/XOXJGz

【讨论】：