반응 사이드 바/콘텐츠 영역 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

나는이 바로 자바 스크립트를 사용하지 않고 수 있습니다 확신 해요?

Answer 1

테이블 또는 css 플렉스 박스 모델 (IE10 +)을 사용하여 수행 할 수 있습니다.

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

: 어쨌든 당신이 CSS에 그런 :, div1에

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

을 예컨대을하는 클래스를 전환 할 수 있어야한다, 그래서 당신은 자바 스크립트에 의해 DIV2을 전환하는 경우