javascript - 两侧的 CSS 垂直菜单

Question

我正在尝试创建一个在主要内容部分的每一侧都有两个垂直菜单的设计。我尝试了内联位置、相对位置和固定位置的各种组合，但无法正常工作。

fiddle :https://jsfiddle.net/g4vbampm/3/

菜单(红色和蓝色 block )应该紧挨着中间的绿色部分(position:fixed 把它放在屏幕的左边)。他们还应该从屏幕顶部开始并且永远不要移动。中间绿色部分的高度会随着js代码动态变化。

.app {
  text-align: center;
}
.left {
  background: red;
  width: 150px;
  height: 300px;
  display: inline-block;
}
.center {
  background: green;
  width: 300px;
  height: auto;
  display: inline-block;
}
.right {
  background: blue;
  width: 150px;
  height: 300px;
  display: inline-block;
}

<div class="app">

  <div class="left">
    menu1
    <br/>menu2
    <br/>menu3
    <br/>
  </div>

  <div class="center">
    CONTENT
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a

    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>a
    <br/>
  </div>

  <div class="right">
    menu1
    <br/>menu2
    <br/>menu3
    <br/>
  </div>


</div>

Answer 1

The menus (red and blue blocks) should be right next to the middle green part (position:fixed put it at the edge of the screen to the left). They should also start at the top of the screen and never move.

如果他们应该“永不移动”，那么您需要 position:fixed(除非您想通过 JavaScript 不断调整位置，这在大多数情况下在性能和视觉效果方面都很糟糕。 )

固定定位始终以视口(viewport)为引用点。但是如果您动态计算位置，您仍然可以在这里使用它。

你的中间元素是 300px 宽，所以其他两个元素需要定位在 50% + 150px，从右边开始。左边(每种情况都相反。)

.left,
.right {
  position: fixed;
  top: 0;
}
.left{
  background:red;
  width:150px;
  height:300px;
  right: calc(50% + 150px);
}
.right{
  background:blue; 
  width:150px;
  height:300px;
  left: calc(50% + 150px);
}

https://jsfiddle.net/g4vbampm/4/

浏览器对 calc 的支持非常好，http://caniuse.com/#search=calc

如果你需要它在不支持 calc 的浏览器中工作，你也可以使用负边距从中间偏移元素，

.left{
  right: 50%;
  margin-right: 150px;
}

https://jsfiddle.net/g4vbampm/7/