固定底部內容的位置，直到頂部內容高度擴大

我正在尋找一種僅用於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

不客氣 –

回答