javascript - 高さ100％の固定divでページをスクロールします。これは常に上にあり、フッターを覆わないようにする必要があります

Question

.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}

固定divは常に上にある必要があり、スクロールするときにフッターを覆わないようにする必要があります。100％の高さ、または上からフッターまで。

どうすればいいですか？

score 1 · Accepted Answer

最も簡単な答えは、固定領域のzインデックスを削除して、フッターをカバーする場合に、代わりにフッターの後ろに移動するようにすることです。フッターがであることを確認する必要がありますposition: relative;。

代わりに、2つが交差しないようにしたい場合は、より困難な課題に直面します。

それを行う最良の方法は、固定要素に固定の高さを与え、フッターに固定の高さを与え、固定要素の高さ+フッターの高さ<=画面の高さを確認することです。

これらは本当にあなたの唯一の選択肢です-あなたは本質的にそれを中心に設計する必要があります。私の知る限り、固定要素がページ上の他の要素と交差するときに動的に縮小する方法はありません（結局、ページ上の残りの要素を無視することが目的ですposition: fixed）。

score 0 · Accepted Answer

jQueryを使用してoffset()、あなたが尋ねたことの簡単で汚い実装をまとめました.scrollTop()height()

これがjsfiddle の例です。

これはあなたが望んでいたものですか？もしそうなら - なぜですか？:) この方法と、固定要素がフッターの下にある方法との間に視覚的な違いは見られません。

2 に答える 2