2面CSS垂直メニュー

Question

私は、メインコンテンツ部分の両側に2つの垂直メニューを持つデザインを作成しようとしています。 私はインラインと相対的な位置と固定の位置の様々な組み合わせを試みましたが、動作させることはできません。

フィドル：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

メニュー（赤と青ブロック）は、中央の緑色の部分（位置のすぐ隣でなければなりません：固定の時にそれを置きます左端の画面の端）。また、画面の上部から開始し、決して移動しないでください。

彼らは必要がある場合は、「移動することはありませんが、」あなたは（あなたは常にパフォーマンスとビジュアル成果という点で、ほとんどの場合、悪いのJavaScriptを介して位置を適応させる場合を除き。）

固定position:fixedたい位置決めは常にビューポイントを基準点とします。ただし、動的に位置を計算する場合は、ここでも使用できます。

中間要素の幅が300pxなので、他の2つの要素は右から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/

カルクためのブラウザのサポートはかなり良いです、http://caniuse.com/#search=calc

あなたはそれが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

このようにするよりも、スクロールしても左と右のdivに固定位置を使用したい場合。あなたのhtmlをリセットしなかった場合にのみ：

* { 
 
    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}マージンを覚えておいてください。

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/