以下に示す内容を実現する css のみのソリューションを探しています。ここで気になるのは、画像右側のコンテンツです。
例 1: 最小限のトップ コンテンツ:トップ コンテンツ (ここでは "hi" として表示) が 1 行しかない場合、下のコンテンツ (以下のすべて) を図のように下にフラッシュします。
例 2: より多くのトップ コンテンツ:ここにはより多くのトップ コンテンツが表示されますが、それでもその下の要素の位置の変化を正当化するのに十分ではありません。
例 3: 上部のコンテンツが多い:明らかに、下部の要素を移行する必要があります。
基本的に、コードは現在<div>、互いに積み重ねられた 2 つの要素だけです。
<div id="top">Lorem ipsum...</div>
<div id="bottom" style="margin-top:30px;">...</div>
下部要素を固定位置に設定するのは簡単ですが、そうすることが理にかなっている場合は下に移動したいと思います (例 3 を参照)。この正確な動作を達成するための可能な css のみのソリューションはありますか?