CSS вертикальное меню с двух сторон

Question

Я пытаюсь создать дизайн с двумя вертикальными меню на каждой стороне основной части контента. Я пробовал различные комбинации встроенных и относительных и фиксированных позиций, но не мог заставить его работать.

Fiddle: 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, который в большинстве случаев плохо с точки зрения производительности и визуального результата.)

Fixed позиционирование всегда отображает окно просмотра как контрольную точку. Но вы все равно можете использовать его здесь, если вы вычисляете позицию динамически.

Ваш средний элемент имеет ширину 300 пикселей, поэтому остальные два элемента должны быть расположены на расстоянии 50% + 150 пикселей, справа или справа. слева (противоположное в каждом случае.)

.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

Если вы хотите использовать фиксированную позицию для левого и правого div, даже если u прокрутите, чем сделать это.

* { 
 
    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/