父div的两倍高？ [英] Double height of parent div?

问题描述

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

I am trying to achieve something that I assumed would be quite simple. In the below code, I want to make the parent height 200% of its current height, which is based on its children. The reason for this is that I can then position the children within the parent as I wish. Is there any way to simply double the height of the parent div?

HTML

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

推荐答案

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

Here is hack using CSS grid. In the below code the span element will have twice the height of its content but you will also have an overflow:

.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

这篇关于父div的两倍高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！