html - 考虑溢出内容的大小进行定位

Question

是否有一种仅限 CSS/HTML 的方法来考虑溢出内容的大小？考虑下面的例子：

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
</div>
<div class="belowContent">Content below</div>

divbelowContent中的文本最终位于innerContent.

问题：由于heightofinnerContent是300px，我想出belowContent现在300px下面outerZeroSize（而不是在上面）。这对 CSS/HTML 可行吗？

约束：

• 假设它.outerZeroSize不能.innerContent改变（既不是 HTML，也不是 CSS 部分），因为它们来自第三方（React-Virtualized Table）。
• 更新：的高度.innerContent可以动态变化，300px这只是一个例子（所以仅仅抵消.belowContent同样的数量也不是一种选择）。
• 可以改变的是.belowContent（HTML 和 CSS），当然也可以在div周围添加东西。.outerZeroSize

相关问题（从 React Virtualized Table 的角度来看）。

标签： htmlcssoverflow

Answer 1

只需在. _belowContent

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  margin-top: 300px;
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
</div>
<div class="belowContent">Content below</div>

---

另一种解决方案是搬进belowContent去outerZeroSize。

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  width: 200px;
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
  <div class="belowContent">Content below</div>
</div>