时间戳

首页 > 解决方案 > 父div的两倍高度？

html - 父div的两倍高度？

问题描述

我正在尝试实现一些我认为非常简单的事情。在下面的代码中，我想让父级高度为其当前高度的 200%，这是基于其子级的。这样做的原因是我可以随心所欲地将孩子定位在父母中。有没有办法简单地将父 div 的高度加倍？

HTML

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

标签： htmlcss

解决方案

这是使用 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

推荐阅读