做出正确的反应

Question

我目前正在项目中的仪表盘上工作。我想使右侧面板占据其余空间。让我告诉你现在的样子。

因此，在两种情况下，我都希望使div响应。

现在有一个光标图标，用于切换名为“ menuToggle”的右侧面板（此处转为简单按钮）

$('#menuToggle').on('click', function (event) {
      debugger;
    $('body').toggleClass('open');
  }); 

aside.left-panel {
 background: #272c33;
 display: table-cell;
        height: 100vh;
        min-height: 100%;
        padding: 0 25px;
        vertical-align: top;
        width: 280px;
        transition: width 0.3s ease;
    }
.right-panel {
    display: table-cell;
    padding-left: 0 !important;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}
    .open aside.left-panel {
    max-width: 70px;
    width: 70px;
}

aside.left-panel {
    background: #272c33;
    display: table-cell;
    height: 100vh;
    min-height: 100%;
    padding: 0 25px;
    vertical-align: top;
    width: 280px;
    transition: width 0.3s ease;
}
.open .right-panel {
    margin-left: -210px;
}
.right-panel {
    display: table-cell;
    padding-left: 0 !important;
    -webkit-transition: all .35s ease;
    -moz-transition: all .35s ease;
    -ms-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="menuToggle">Menu Toggle</button>

<aside id="left-panel" class="left-panel">
                <nav class="navbar navbar-expand-sm navbar-default">
    
                    
                    <!-- /.navbar-collapse -->
                </nav>
            </aside>
    <div id="right-panel" class="right-panel">
    <!-- Header-->
       <header id="header" class="header">
    
       </header>
    </div>

Answer 1

这是一个flexbox示例。

$('#menuToggle').on('click', function (event) {
  // debugger;
  $('body').toggleClass('open');
});

div.wrapper {
  display: flex;
}

aside.left-panel {
  background: #272c33;
  /* display: table-cell; */
  flex: 0 1 auto;
  height: 100vh;
  min-height: 100%;
  padding: 0 25px;
  vertical-align: top;
  width: 280px;
  transition: width .3s ease;
}

div.right-panel {
  flex: 1 1 auto;
  background-color: #EEE;
  /* display: table-cell; */
  padding-left: 0 !important;
  transition: all .3s ease;
}

.open aside.left-panel {
    /* max-width: 70px; */
    width: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="menuToggle">Menu Toggle</button>

<div class="wrapper">
  <aside id="left-panel" class="left-panel">
    <nav class="navbar navbar-expand-sm navbar-default">
        <!-- /.navbar-collapse -->
    </nav>
  </aside>
  <div id="right-panel" class="right-panel">
    Some content...
    <!-- Header-->
    <header id="header" class="header">
    </header>
  </div>
</div>

Answer 2

不确定我是否完全了解您，但是看起来您可以将left-panel中的填充调整为padding: 0px 10%，然后将right-panel中的宽度调整为{{1} }。

我认为，如果您从width: 90%删除填充并使其为left-panel，那将更有意义。