固定底部内容的位置,直到顶部内容高度扩大
问题描述:
我正在寻找一种仅用于css的解决方案,该解决方案将完成以下所示内容。这里关注的领域是图片右侧的内容。固定底部内容的位置,直到顶部内容高度扩大
实施例1:最小顶内容:当仅存在一个刷新到的底线的顶部内容(显示为“喜”在这里)保持底部内容(下面的所有内容),如图所示。
实施例2:更多顶部内容:此处所示更多顶部的内容,但仍不足以保证在它下面的元件的任何位置偏移。
实施例3:顶部内容的数量:显然,底部元件现在需要移位。
基本上,代码目前只有两个堆叠在一起的<div>
元素。
<div id="top">Lorem ipsum...</div>
<div id="bottom" style="margin-top:30px;">...</div>
可以很容易地设置底部元件在固定的位置,但我想他们可以进行降档时是有意义的这样做(如实施例3所示)。任何可能的纯CSS解决方案来完成这种精确的行为?
用于最小高度#top返回{最小高度:100像素;} .......... –