我正在寻找一个纯 css 的解决方案来完成下面的说明。这里关注的区域是图像右侧的内容。
例 1：最少的顶部内容：当只有一行顶部内容（此处显示为“hi”）时，保持底部内容（下面的所有内容）如图所示刷新到底部。
示例 2：更多热门内容：此处显示了更多热门内容，但仍不足以保证其下方元素的任何位置变化。
例 3：很多顶部内容：显然，底部元素现在需要转移。
基本上，代码目前只是两个<div>相互堆叠的元素。
<div id="top">Lorem ipsum...</div>
<div id="bottom" style="margin-top:30px;">...</div>
将底部元素设置在固定位置很容易，但我希望它们在有意义的时候向下移动（如示例 3 所示）。任何可能的纯 CSS 解决方案来完成这种精确的行为？