固定小文字のサイドバーがXXpxの高さであるとしましょう（私が意味するものを視覚化したい場合はhttp://www.getskeleton.com/を参照してください）。ブラウザの高さがサイドバーよりも大きければ、サイドバーは私が望むやり方を正確に見せます。ただし、ブラウザの高さがサイドバーの高さよりも低くなると、下部のコンテンツが途切れてしまいます。固定サイドバーのブラウザが高すぎる（下が切れている）
最初はサイドバーにposition: fixedがありますが、ブラウザがサイドバー全体を含むには小さすぎる場合は、position: abosluteに変更します。基本的には、ページの読み込みとユーザーのサイズ変更が完了したときに、ページのサイズを変更したら、下部のコンテンツが切り捨てられていないことを確認してから、適切なposition属性を割り当てます。
はこのような何かを行います。これはをと一緒にJavaScriptメソッドで処理できるデフォルトの純粋なCSSソリューションとして使用できます。
ので（のサイドバーは、背の高い700pxであるとしましょう。）のようにあなたは、このための垂直メディアクエリを使用することができ
#sidebar {
position: absolute;
}
media screen and (min-height:700px) {
#sidebar { position: fixed; }
}
を最初の絶対位置を宣言することにより、あなたはブラウザがサポートしないことを確認してくださいメディアクエリは絶対配置されたサイドバーを取得しますが、それでも機能します。
var $sidebar = $('#idOfSidebar')
,$w = $(window);
$w.resize(function() {
var pos = $w.height() < $sidebar.height()? 'absolute': 'fixed';
$sidebar.css({position: pos});
});
非常にきれいな解決策ですが、これは古いブラウザでは機能しません。 – koenpeters
ありがとうございます、私は何か互換IE7 +を探しています。 – Wex
私は '.resize'関数を使ったことがありません...この関数はサイズ変更でかなり数回呼び出される可能性があるため、パフォーマンスについて心配する必要はありますか？ – Wex
はい、心配する必要があります。だからこそ、私はすべての「高価な」ish文を関数自体から取り除き、その中にキャッシュされたものだけを使用したのです。 – koenpeters
この文をさらに最適化する方法はありますか？サイドバーの高さをキャッシュすることは、初心者のためのかなり単純なもののように思える – Wex