Отказоустойчивая боковая панель/область содержимого html css

Question

Я пытаюсь сделать 2 divs отзывчивыми, но у меня гораздо больше проблем, чем следовало бы.

Div2 по умолчанию 100% ширина. Div1 является toggleable, когда это происходит, ширина должна составлять 50% для обоих div. При переключении 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

Это можно сделать с помощью таблиц или модели flex box box (IE10 +). В любом случае, если вы переключая div2 по Javascript, поэтому вы должны быть в состоянии переключить класс на див1, например .:

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

Затем с помощью CSS:

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