css - 左右菜单 - 位置固定和中间内容应该是可滚动的

Question

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

虽然我给了正确的菜单位置:修复了它即将出现的右侧但在position:relative它工作正常。

如果您早日回复，我们将不胜感激..

.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>

这是供引用的屏幕截图，当我给 position:fixed 到右侧菜单时，我的右侧菜单重叠在左侧菜单上..

enter image description here

Answer 1

如果你给 position:fixed 它将默认留在 left:0 和 top:0

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

见下文(红色只有 position:fixed;蓝色也有 right:0;)

同样在使用 position:fixed , float:left 或 float:right 时也是无用的，带有 position:fixed 的元素只对齐取决于在你设置的值上，右，下，左，默认情况下它有 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>