2016-09-21 11 views
1

最小高さを使用してビューポートの高さ全体を占めるnavメニューがありますが、これは固定位置ですが、これは問題です。携帯のような小さなブラウザウィンドウまたは解像度で表示した場合、メニュー内の固定位置メニュー、ビューポート外のコンテンツ

.menu{ 
    min-height:100vh; 
    height:auto; 
    position:fixed; 
} 

内容は、さらにダウンビューポートよりも表示することができますので、あなたは、最後のメニューオプションを表示することはできません。

jQuery(WordPressの管理メニューで使用されているソリューションのようです)を使ってCSSの位置を動的に変更しているのか、スクロールのようなスクロールの位置を調整しているのかこの例:その下端が見えてくるまで

https://queen-theme.myshopify.com/

私は、同じユーザー体験をしたいので、要素が作用(または印象を与える)絶対位置を持つのは、それが固定になってしまいますポジション。

これらのメニューはかなり一般的なので、いくつかの方法がありますか?

答えて

0

@media CSSルールを使用して、特定の条件に応じてCSSプロパティを適用できます。以下の例では、画面の背景色を画面サイズ500px以下の明るい色で表示します。

@media only screen and (max-width: 500px) { 
body { 
    background-color:lightblue; 
} 

}

はあなたが見つけることができる詳細here