兩側的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/