CSS固定div。不要なオーバーラップを避ける

Question

私は2つの列で作られたCSSレイアウトを持っています。左側のナビゲーション列は修正divです。右側の列のメインコンテンツをスクロールしながらそこにとどまります。

ブラウザのウィンドウを縮小したりズームインしたりすると問題が発生します。ブラウザのwindomを水平方向にスクロールすると、右側のメインコンテンツが左側のナビゲーションカラムと重複し始めます。

ブラウザウィンドウのサイズやズームレベルがどのようなものであっても、水平方向にスクロールすると固定されたdivは重複していませんが、メインの列は右に移動するように修正できますか？ （これはそのため申し訳ありませんが、かなり厄介である）http://justarandomone.tumblr.com/

すべてのコードがソースである：

あなたがで本当のためにそれを見ることができます。

ご希望の方は、お手数ですが、ありがとう！

Answer 1

私の意見では実際には問題ではありません。 とにかく、divのコンテンツのメインブロックを置き、絶対的な位置づけをすることができます。 サイドバーから浮動小数点：左を削除する必要はありません。

#container { 
    width:751px; 
    margin-top:56px; 
} 

#sidebar { 
    width:235px; 
    position:fixed; 
    top: 0px; 
    left: 0px; 
} 
#content { 
    position: absolute; 
    top: 0px; 
    left: 235px; 
    width: 516px; /* 751 -235 */ 
} 

Answer 2

Chromeを異常に小さなウィンドウサイズに縮小したり、iPhone上で縮小したりすると、再作成することができます。サイドバーのdivをposition:fixedに設定すると、強制的にその位置に留まります。水平スクロールに問題が発生します。

私はサイドバーposition:absoluteを切り替えて、サイドバーとblogrollの両方についてtop-marginを同期させました。うまくいきます。

Answer 3

考えられる提案。 cssを使用して 'blogroll'と 'sidebar'の高さを同じ値に設定します（この例では100％を使用しています）。 Thesは 'overflow：auto;'を追加します。 「ブログロール」

#sidebar { 
    width:235px; 
    height:100%; 
    float:left; 
    clear:both; 
    position:fixed; 
} 

#blogroll { 
    width:558px; 
    margin-left:290px; 
    position:absolute; 
    min-height:300px; 
    height: 100%; 
    overflow:auto; 
    padding-bottom:27px; 
    padding-top: 171px; 
} 

にこれには1がそれらを使用する（ブログロールは、ページ内で独自のスクロールバーを持つことになります、そして、理論的には、ページには、いずれかを持っていません。確認するために、あなたの体を設定しますゼロの余白を0にする

Answer 4

あなたは#sidebarに堅実な背景色（例えば白）を付けることができます。これはz-index（z-indexより大きい任意の数）のスタックの上に置きます。 #sidebarを100％伸ばしたい場合があります）最後に＃sidebarを左側の高さ全体に渡って表示したい場合は、 "top： 0 "にしてください。