レスポンシブサイドバー/コンテンツエリアhtml css

Question

私は2つのdivsを反応させようとしていますが、私ははるかに多くの問題を抱えています。

Div2はデフォルトで100％の幅です。 Div1はトグル可能ですが、その場合、両方のdivの幅は50％になります。 div2をオフにすると、100％の幅に戻ります。

/* Main App */ 
 
\t #app { 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 
\t #app #div1 { 
 
     width: 50%; 
 
     float: left; 
 
    } 
 
\t #app #div2 { 
 
     max-width: 100%; 
 
     min-width: 50%; 
 
     float: right; 
 
    }

<div id="app"> 
 

 
\t <div id="div1"> 
 
\t \t toggled content here 
 
\t </div> 
 
\t \t 
 
    \t <div id="div2"> 
 
    \t \t main content here 
 
\t </div> 
 

 
</div> 
 
\t

私は、これは右、JavaScriptを使用しなくても可能であると確信していますか？

Answer 1

テーブルまたはCSSフレックスボックスモデル（IE10 +）で行うことができます。とにかくあなたはDIV1にクラスを切り替えることができるはずですので、あなたが例えば、は、JavaScriptによるDIV2をトグルしている場合：

$('#someToggle').click(function() { 
    $('#div2').toggle(); 
    $('#div1').toggleClass('full-width'); 
}); 

を次にCSSで：

#app #div1.full-width { width: 100%; float: none; }