2017-02-26 9 views
0

固定ヘッダー/ navbar divで200pxの高さと設定された古いインデックスに基づいて、基本的なページ設定を行う方法を解明しようとしています。下の2番目のdivは、ページのコンテンツをスクロール可能にし、残りの垂直方向のスペースをブラウザウィンドウ内に収める必要があります。助言がありますか?div固定ディビジョンでスクロール可能

+1

はStackOverflowのへようこそ!あなたは単純に 'position:fixed'を探しているようです。私たちがあなたのお手伝いをするために、あなたの質問を更新して、関連するすべてのコードを[最小限の、完全で検証可能な例で]表示してください(http://stackoverflow.com/help/mcve)。また、あなたの問題を解決するためにこれまでに試したことをお知らせください。詳細については、良い質問をする方法について[ヘルプ記事](http://stackoverflow.com/help/how-to-ask)を参照してください。 –

答えて

0

overflow: hidden;をCSSパーツに追加すると、divがスクロールできなくなります。 overflow: auto;例再び本部は、スクロール可能な

を作る:あなたはナビゲーションバーを固定にし、その下にボディスクロールをさせることができますいずれか https://jsfiddle.net/v596fvbu/

0

.navbar { 
    height: 3em; 
    width: 100%; 
    position: fixed; 
} 

http://codepen.io/helb/pen/EWjPqJ

やページを制限高さをブラウザのウィンドウサイズに設定し、2番目のdivをスクロール可能にします。

.page { 
    overflow-y: scroll; 
    height: calc(100vh - 3em); /* browser viewport height minus the navbar height */ 
} 

http://codepen.io/helb/pen/NpqNxy

注スクロールバーの配置の違い:

scrollbars

関連する問題