固定底部内容的位置，直到顶部内容高度扩大

我正在寻找一种仅用于css的解决方案，该解决方案将完成以下所示内容。这里关注的领域是图片右侧的内容。固定底部内容的位置，直到顶部内容高度扩大

Fig. 1

实施例1：最小顶内容：当仅存在一个刷新到的底线的顶部内容（显示为“喜”在这里）保持底部内容（下面的所有内容），如图所示。

Fig. 2

实施例2：更多顶部内容：此处所示更多顶部的内容，但仍不足以保证在它下面的元件的任何位置偏移。

Fig. 3

实施例3：顶部内容的数量：显然，底部元件现在需要移位。

基本上，代码目前只有两个堆叠在一起的<div>元素。

<div id="top">Lorem ipsum...</div> 
<div id="bottom" style="margin-top:30px;">...</div>

可以很容易地设置底部元件在固定的位置，但我想他们可以进行降档时是有意义的这样做（如实施例3所示）。任何可能的纯CSS解决方案来完成这种精确的行为？

2013-07-11 TPoy

用于最小高度#top返回{最小高度：100像素;} .......... –

使用min-height例如

#top{min-height:80px;}

2013-07-11 05:39:45

尼斯和简单。谢谢阿卜杜勒。 – TPoy

不客气 –

回答