两侧的CSS垂直菜单

Question

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

小提琴：https://jsfiddle.net/g4vbampm/3/

菜单（红色和蓝色块）应该是旁边的中间绿色部分（位置：固定把它放在屏幕的边缘向左）。他们也应该从屏幕的顶部开始，不要移动。中间绿色部分的高度将随着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

菜单（红色和蓝色块）应该是旁边的中间绿色部分（位置：固定把它放在屏幕边缘向左）。他们也应该从屏幕的顶部开始，不要移动。

如果他们应该“永动”，那么你想position:fixed（除非你要不断的适应通过JavaScript，这在大多数情况下，坏的性能和视觉效果方面的立场。）

固定定位始终将视口作为参考点。但是如果你动态地计算位置，你仍然可以在这里使用它。

你的中间元件是300像素宽，所以其它两个元件需要被定位在50％+ 150像素，从右侧RESP。 （每种情况都相反）。）

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

用于计算浏览器支持是相当不错的，http://caniuse.com/#search=calc

如果你需要它不支持浏览器的计算工作，你也可以使用负保证金来抵消从中间元件，

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

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

Answer 2

试一次

.app{ 
 
    text-align:center; 
 
} 
 

 
.left{ 
 
    background:red; 
 
    width:150px; 
 
    height:300px; 
 
    position:fixed; 
 
    float:left; 
 
    left:0px; 
 
} 
 

 
.center{ 
 
    background:green; 
 
    width:calc(100% - 300px); 
 
    width:-webkit-calc(100% - 300px); 
 
    width:-moz-calc(100% - 300px); 
 
    height:auto; 
 
    float:left; 
 
    margin-left:150px; 
 
    
 
} 
 

 
.right{ 
 
    background:blue; 
 
    width:150px; 
 
    height:300px; 
 
    position:fixed; 
 
float:left; 
 
right:0px; 
 
}

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

尝试使用CSS float属性。 http://www.w3schools.com/css/css_float.asp。但是你必须将主容器分成3列。所以.left类将有33.3％的宽度等等。如果你想要一些好的网格系统的html框架，试试看http://getbootstrap.com/网格系统

Answer 4

如果你想使用固定位置的左和右divs即使当你滚动比这样做。

* { 
 
    margin: 0; 
 
    } 
 

 
.left, 
 
.right { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 150px; 
 
    height: 300px 
 
} 
 

 
.left { 
 
    left: 0; 
 
    background: red; 
 
} 
 

 
.right { 
 
    right: 0; 
 
    background: blue; 
 
} 
 

 
.center { 
 
    width: calc(100% - 300px); 
 
    margin: 0 auto; 
 
    background: green; 
 
}

<div class="app"> 
 
    <div class="left"> 
 
    content 
 
    </div> 
 

 
    <div class="center"> 
 
    content 
 
    content 
 
    contentcontent 
 
    <br><br><br><br><br><br><br><br><br><br> 
 
    contetn 
 
    </div> 
 

 
    <div class="right"> 
 
    content 
 
    </div> 
 
</div>

记住，使用* {保证金：0}只有当你没有重置您的HTML。

Answer 5

以下应为你工作：

.app{ 
     text-align:center; 
    } 

    .left{ 
     position:fixed; 
     background:red; 
     width:150px; 
     height:300px; 
     left:0; 
     float: left; 
    } 

    .center{ 
     position: relative; 
     background:green; 
     width:300px; 
     height:auto; 
     left: 140px; 
     float: left; 
    } 

    .right{ 
     position: fixed; 
     background:blue; 
     width:150px; 
     height:300px; 
     left: 445px; 
     float: left; 
    } 

https://jsfiddle.net/9wnwL7rp/