左の固定幅divと右の流体幅div

Question

固定幅は左側に<div>、右側には<div>のフレキシブルがあります。 また、左<div>は折りたたみ可能です（jQueryを使用して負のマージンで非表示にしています）。次に、右に<div>が必要です。

PS：私は、水平スクロールをせずにパディングを持つコンテナ内の100％幅のdivを持つことができないよ...

Answer 1

私は 上の固定幅の左、右のウィンドウのサイズが変更されるため に柔軟を持っていると思います。

float: leftはdiv左、右divにoverflow: hiddenを追加します。

を参照してください：http://jsfiddle.net/JsLuG/

また、左は折りたたみ可能である（私は否定的 余裕でそれを隠すためにjQueryのを使用し ）、それから私は全幅を持っている権利 を必要としています。 http://jsfiddle.net/JsLuG/1/

PS：私は、水平スクロール を持たずに パディングと容器内部の100％ 幅のdiv要素を持っていることができないよ...

私の方法で動作します

width: 100%にはpaddingが含まれていないためです。

参照：http://css-tricks.com/2841-the-css-box-model/

最も簡単な方法は、この問題を回避するには、width: 100%を宣言しないことです。ブロックレベルの要素は、デフォルトで「全幅」（width: auto）になります。

または、ラッパー要素を追加し、paddingをその上に置きます。または、box-sizing: border-boxを使用します。

Answer 2

だけの幅であることを右のdivのマージン左を設定左のdiv。左divを折りたたむためにスクリプトを実行するときは、right-divのマージンを調整する必要があります。

http://jsfiddle.net/vpKfn/

Answer 3

これは、あなたが始められるでしょうpostion:fixed;次の例を使用するための良好なユースケースです。サイドバーが非表示になっているときに異なるクラスを簡単に作成し、divのクラスを切り替えて別の位置の値を使用することができます。

HTML

<div class="sidebar">side stuff</div> 
<div class="main">main content</div> 

CSS

.sidebar{ 
    background-color:#CCC; 
    position:fixed; 
    left:0; 
    top:0; 
    bottom:0; 
    width:150px; 
} 

.main{ 
    background-color:#AAA; 
    position:fixed; 
    left:150px; 
    top:0; 
    bottom:0; 
    right:0; 
}