2011-11-11 4 views
1

固定ヘッダーと固定サイドナビゲーター、およびスクロールコンテンツを持つサイトがあります。CSS - 完全に表示されていない場合、固定サイドナビゲーターがスクロール/移動する必要があります。

私は、固定側-NAVはその画面の下からはみ出していくつかのページで、小さな画面を持つユーザーは、すべてのメニュー項目にアクセスできないことを発見しました。

これには何らかの方法がありますか?

私が説明するための簡単なモックアップをしました。

http://jsfiddle.net/cr0wn3r/ycTXF/

ブラウザを縮小するまで、それはすべての罰金だ、とあなたはleftcolは、画面の下部消灯し、それまでスクロールする方法はありません参照してください。

答えて

1

メディアクエリを使用して、ビューポートの大きさを検出することができ、その後、条件付き(ビューポートの高さが小さすぎると、おそらくすべてのコンテンツの後にそれを置くこと)に応じて、あなたのサイドバーのスタイル。

This articleレスキューサイトで達成できることをEthan Marcotteがよく説明しており、this siteはさまざまなビューポートの処理方法を示しています。

キーが正しく異なるビューポートを処理するために、メディアクエリを使用することです。

+0

これについてのヒントをありがとう。私は良い読書を持っています。 Imが何かを見逃していない限り、IE7の問題を解決するつもりはないが、私はまだそれをサポートしなければならない。 – petesiss

+0

あなたは常にメディアクエリのレガシーIEをサポートするためのrespond.jsを使用することができます:[https://github.com/scottjehl/Respond](https://github.com/scottjehl/Respond) – Larry

+0

恐ろしいです。ポインタありがとう。 – petesiss

0

私は(私はあなたのフィドルでこれをやった)あなたのCCSへ

overflow: scroll; 

を追加するためのソリューションを考えることができます。それは醜いですが、そうでなければあなたの訪問者は新しいスクリーンを購入しなければなりません... 多分あなたはちょうどフォントサイズを調整することができますか?

+0

なるほど、ここでCSSメディアクエリを説明するクリスCoyierことで素晴らしい記事があります。まあ、私は醜いと生きることができますが、私はオーバーフローを追加する:スクロールは、それが画面の下部にぶら下がっていることを認識しているようにdiv doesntのように動作しません。隠されたコンテンツは隠されたままです。ナビゲーションdivの高さを固定するとうまくいくかもしれませんが、私はそれをやりたいとは思っていません。少数のユーザーだけに対応するために小さなサイズを設定する必要があります。メニューをスクロールする必要があります。 – petesiss

1

あなたはおそらく小さい画面を持つユーザーのためのあなたの固定NAVのスタイリングを変更するにはメディアクエリを使用する必要があります。より小さなフォントサイズ、パディングなど。

http://css-tricks.com/6731-css-media-queries/

+0

これについてのヒントをありがとう。私は良い読書を持っています。 Imが何かを見逃していない限り、IE7の問題を解決するつもりはないが、私はまだそれをサポートしなければならない。 – petesiss

関連する問題