右側の固定メニュー

Question

私は、垂直にスクロールすることができる中央のメインディビジョンを持つウェブページを持っています。

ページの右側に固定された固定メニューが必要です。私は「位置：固定」を使用している場合しかし、私は中央のdivより小さくなるようにページのサイズを変更すると、メニューが中心のdivと重なる

全幅ページ：

リサイズページ：

代わりに、中央のdivの最小幅を優先してください。この場合、固定メニューはスクロールして表示するだけです。

ブラウザの右側に固定されているのではなく、中央のdivの右側に固定メニューを配置することはできますか？

申し訳ありませんが、この質問が不明である場合、私は喜んで

Answer 1

はあなたがまたはあなたができた上で、中心のdivをプッシュするメニューの下のメニューと同じ幅である第二のdivを追加することができ、コメントのいずれかの不確実性にお答えしますメインディビジョンのサイズを調整するだけです。

Answer 2

使用Thisは、最初は混乱する可能性がありますが、解決策になります。 （ "col-md-8"クラスで空のdivを作ってから、 "col-md-4"のクラスでnave barにサラウンドDIVを渡してください）ここにレッスンがありますので、拾う。これが助けて欲しいと思っています:)

Answer 3

シンプルで効率的なアプローチは、フレックスボックスを使用することです。 は、次のCSSを持っているでしょう、あなたの中心のdivが600PXであり、あなたのサイドバーが200pxのだと言う：

.container { 
    width: 100%; 
    display: flex; 
    // flex defaults to left-to-right row & nowrap, fine in this case 
    justify-content: space-between; 
    // makes sure your 2 child divs will be pushed left & right 
} 

.main { 
    flex-grow: 1; // makes the main div grow to occupy space if width > 800px 
    flex-shrink: 0; // main div never shrinks below its flex-basis size 
    flex-basis: 600px; 
} 

.sidebar { 
    flex-grow: 0; // sidebar never grows 
    flex-shrink: 0; // and never shrinks 
    flex-basis: 200px; 
} 

this Codepen

1回の警告を参照してください：フレキシボックスのサポートは、古いブラウザ（IE 10）にグラグラで、またはをフラットアウトはサポートされていません（IE 9 &）。