相対配置されたコンテナ内の絶対配置されたフッター

Question

この質問のバージョンは何度も何度も尋ねられています。私が知っているのは、私が過去4時間でほぼすべての人を読むと思うからです。

はどこにも私は、このための答えを見たことがありません。それ以外の場合は非常に機能的には、コードの上に非常に限られた制御を可能にしながら、私はテンプレートを持っている ：

私が午前問題はこれです。私は、しかし、CSSで遊ぶことができます。 ヘッダーの近くで、フッターのすぐ下にある必要がある項目がいくつかあります。

私は比較的に配置しており、絶対に私はフッターの下に必要な項目を含む位置付けているとの仕事を動作するようにラッパーを持っています。

.referencepositionwrapper { 
    position: relative; 
} 
.absolutepositioncontainer { 
    position: absolute; 
    bottom: -144px; 
} 

しかしアイテムが低下するだけは、高さ約136ピクセルである：

これは、と非常によく動作します。

ここには擦れがあります。フッターの下に移動する必要があるコンテンツは動的です。時にはそれは136pxの高さ、時には36pxです。時には300pxの高さです

は現在、絶対的な位置付けの項目は、コンテナの高さが変わるときに、物事がグラグラ取得ラッパーの底部とコンテナを参照します。

二つの要素の間の、またはオーバーラップ大規模なデッドスペースがないので、包装体の底部と容器の頂部を使用する方法はありますか？

は、任意の助けをいただければ幸いです、ありがとうございました。

---

コンテキストが要求されました。私は、絶対クラスに与えた例で

：

bottom:-144px; 

相対の底とフッタOK絶対

の底間144px距離を作成高さはわずか136pxです。 2つの要素の間には約8ピクセルの隙間があります。しかし、絶対値はページによって異なります。

したがって、フッタには絶対的な300pxの高さになるように、より多くのデータが含まれている場合、オーバーラップ156pxがあります。データが少ない場合は、絶対最大値を36pxにするのに十分なだけと言えば、108pxの「デッドスペース」があります。

私は、相対と絶対のトップの下間、36pxを言う、距離を定義する方法を見つけたいです。

このようにして、絶対値に余分なデータがどれくらいあるかにかかわらず、相対値と絶対値の間には36pxしかありません。

ありがとうございます。お役に立てれば。他の情報が必要な場合はお知らせください。

Answer 1

これを試してみてください：

.referencepositionwrapper { 
    position: relative; 
} 

.absolutepositioncontainer { 
    position: absolute; 
    top: 100%; 
    margin-top: 36px; /* or your custom distance between the two */ 
}