左右菜单 - 位置修复和中间内容应该是可滚动的

Question

我正在制作一个页面，我使用的是左右菜单，应该是位置修复，中间内容应该是可滚动的，应该在我在HTML和CSS下面尝试的菜单后面但是会出错。

当我给出正确的菜单位置时：修正其右侧但位置：相对其工作正常。

您的早期回复会表示赞赏..

.mainBody {
  display: block;
  border: 0px solid #000;
  max-height: 100%;
  min-height: 500px;
  position: relative;
}

.sidebar-left {
  border: 0 solid #004087;
  min-height: auto;
  position: fixed;
  z-index: 30;
}

.pull-left {
  float: left !important;
}

contentright {
  margin-left: 0;
  width: 200px;
}

.contentrightStyle {
  height: 100%;
  padding-right: 0 !important;
  width: auto;
}

.sidebar-right {
  border: 0 solid #004087;
  min-height: auto;
  position: fixed;
}

.pull-right {
  float: right !important;
}

.contentleft {
  height: 100%;
  padding-left: 23px !important;
  width: 200px;
}

.contentleft {
  height: 100%;
  margin-left: -25px;
  width: 266px;
}

<div class="mainBody" style="">

  <div id="sidePanelLeft" class="pull-left sidebar-left">
    <a class="toggler" data-whois="toggler" id="openerleft" style="">
      <i id="toggleImgleft" class="glyphicon glyphiconStyle" style=""></i>
    </a>
    <div id="contentright" class='visible contentrightStyle' style="">
    </div>

  </div>

  <div id="" class='pull-right sidebar-right' style="">
    <a class="toggler" data-whois="toggler" id="opener" style="">
      <i id="toggleImg" class="glyphicon glyphiconStyle" style=""></i>
    </a>
    <div id="contentleft" class='visible contentleftStyle' style="width: auto;">
    </div>

  </div>

  <div class="ScrollableContent">
    th tht jjtkj kl jtlktjkler th tht jjtkj
  </div>

  <div class="clearfix"></div>


</div>

这里是参考的屏幕截图，当我给出位置时，我的右侧菜单在左侧菜单上重叠：固定到右侧菜单..

enter image description here

Answer 1

如果您提供职位：已修复，则默认情况下会保留left:0和top:0

您应在固定的right:0菜单上指定right

见下文（红色只有位置：固定;蓝色也是右：0;）

当使用position:fixed，float:left或float:right无用时，位置：固定的项目只会根据您设置的位置顶部，右侧，底部，左侧对齐默认情况下它有top:0;left:0

div {
	position:fixed;
	width:100px;
	height:100px;
}
.test1 {
	background:red;
}
.test2 {
	right:0;
	background:blue;
}

<div class="test1">

</div>
<div class="test2">

</div>

Answer 2

＆＃13;

＆＃13;

.mainBody {
  display: flex;
  margin: 0 auto;
  /*border: 0px solid #000;*/
  max-height: 100%;
  min-height: 500px;
  background-color: '#000';
}

.sidebar-left, .ScrollableContent, .sidebar-right {
  flex-grow: 1;
}

.sidebar-left{
  background-color: green;
}

＆＃13;

<div class="mainBody" >
    <div class="sidebar-left">
      <a class="toggler" data-whois="toggler" id="openerleft">
        Menu 1
      </a>
      <div id="contentright" class='visible contentrightStyle'>
       <a href="#">Menu2</a>
      </div>

    </div>

    <div class="ScrollableContent">
      <p>Your scrollable content</p>
    </div>


    <div id="" class=' sidebar-right'>
      <a class="toggler" data-whois="toggler" id="opener">
        <i id="toggleImg" class="glyphicon glyphiconStyle"></i>Right menu
      </a>
      <div id="contentleft" class='visible contentleftStyle'>
      </div>

    </div>


  </div>

＆＃13;

＆＃13;

＆＃13;