响应sidebar/content面积htmlcss

Question

我正在尝试使 2 个 div 响应，但我遇到了比我应该做的更多的麻烦。

Div2 默认为 100% 宽度。 Div1 是可切换的，当发生这种情况时，两个 div 的宽度应为 50%。关闭时，div2 应该 return 到 100% 宽度。

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

<div id="app">

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

</div>

我确定不使用 JavaScript 也是可行的，对吧？

Answer 1

可以使用表格或 css 弹性框模型 (IE10+) 来完成。无论如何，如果您通过 Javascript 切换 Div2，那么您应该能够在 div1 上切换 class，例如：

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

然后 CSS:

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

响应sidebar/content面积htmlcss

Reponsive sidebar/content area html css

html

css

jquery

sidebar

responsive