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>

div belowContent 中的文本结束于 innerContent 的文本之上。

问题由于innerContent的height是300px，我想要belowContent 出现在 outerZeroSize 下方 300px (而不是在它上面)。这可以用 CSS/HTML 实现吗？

约束:

• 假设 .outerZeroSize 和 .innerContent 不能更改(HTML 和 CSS 部分都不能)，因为它们来自第三方 (React-Virtualized Table)。
• 更新: .innerContent 的高度可以动态改变，300px 只是一个例子(所以只是偏移 .belowContent 同样的数量也不是一个选项)。
• 可以更改的是 .belowContent(HTML 和 CSS)，当然也可以在 .outerZeroSize周围添加内容分区

Related question (从 React Virtualized Table 的 Angular 来看)。

Answer 1

只需在 belowContent 中添加一个 300px margin-top。

.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>