Question

我正在尝试实现我认为非常简单的目标。在下面的代码中，我想将父高度设置为其当前高度的200％，该高度基于其子级。原因是我可以按照自己的意愿将孩子放在父母中。有什么方法可以简单地将父div的高度加倍吗？

HTML

.parent {
    width: 100%;
    height: 200% // Does not work
}

Answer 1

这是使用CSS网格的 hack 。在下面的代码中，span元素的高度是其内容的两倍，但是您也会发生溢出：

.box {
  width: 200px;
  display: inline-grid;
  grid-template-rows: 200%;
  border: 2px solid;
}

span {
  background: red;
}

<div class="box">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis lobortis lectus, a tincidunt sem. Morbi aliquet est sit amet justo vestibulum sodales.</span>
</div>

<div class="box">
  <span>Lorem ipsum dolor sit amet, consectetur</span>
</div>

此处的详细说明：https://stackoverflow.com/a/52137966/8620333

Answer 2

父div的高度基于子div的高度，因此您需要将子div的高度加倍。因为您说过要定位，所以可以考虑

.child {
    height: 100%;
    margin: 50% 0;
}

或使用变换

.parent {
    transform: scaleY(2);
}

父div的两倍高？

2 个答案: