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

【问题标题】：Left and Right Menu - Position Fix and middle content should be scrollable左右菜单 - 位置固定和中间内容应该是可滚动的
【发布时间】：2017-05-19 17:43:02
【问题描述】：

我正在制作一个使用左右菜单的页面，该菜单应该是位置固定的，中间内容应该是可滚动的，并且应该位于我在 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

【问题讨论】：

我使用左右菜单，为此我对左菜单和右菜单进行位置修复，但右菜单与左菜单重叠，请查看我现在分享的屏幕截图..
使用flex 而不是float。 float 是邪恶的，会让你发疯。

标签： css html twitter-bootstrap-3

【解决方案1】：

如果你给出 position:fixed 它将默认使用 left:0 和 top:0

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

见下文（红色仅与位置：固定；蓝色也有正确：0；）

当使用 position:fixed 、 float:left 或 float:right 时也是无用的，带有 position:fixed 的项目仅根据您设置为它的位置 top、right、bottom、left 的值对齐，默认情况下它有 @ 987654328@

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

<div class="test1">

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

</div>

【讨论】：

【解决方案2】：

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

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

【讨论】：