Я пытаюсь создать фиксированную боковую панель, которая будет оставаться в этой позиции при прокрутке страницы (как на втором изображении), но содержимое страницы находится под этой боковой панелью, а не справа (первое изображение, вы можете видеть синяя часть на боковой панели, это div под панелью.)
Img1: 
Img2: 
(Я использую ссылки на изображения, потому что не могу их опубликовать)
Html:
<div class='barralado'>
~sidebar content~
</div>
<div class='conteudo'>
<div class='inicio'>
<div class='topo'>
<p class='titulo'>Liga Juizforana</p>
</div>
</div>
</div>
Css:
.barralado {
position: fixed;
top: 0;
left: 0;
}
.conteudo {
}
.conteudo .topo {
background-color: #ffffff;
}
.topo .titulo {
font-size: 4em;
color: white;
text-shadow: 2px 2px 1px rgba(150, 150, 150, 1);
margin-top: 3em;
margin-left: 3.5em;
}
Я попытался поставить оба на плаву слева, я попытался очистить, я перепробовал все позиции на обоих, и это не сработало
2-й мини-вопрос: как сделать div "Conteudo" 100vh после того, как поместил его справа на боковой панели? Когда я пробую, он не меняется на 100vh.
3 ответа
Фиксированное позиционирование div будет зафиксировано на странице, даже если вы прокрутите его. И все это находится под ним (у него приоритет z-index).
Чтобы исправить это, задайте левое заполнение div вашего контента равным ширине боковой панели.
.barralado {
position: fixed;
top: 0;
left: 0;
min-height: 300px; // I suggest you give a value to your sidebar.
width:300px; //This is your width;
}
.contneudo{
padding-left:300px; //This is the padding that will go around your sidebar
}
В этом сценарии с фиксированной шириной вы можете сделать свой контент div абсолютно позиционированным, чтобы избежать попадания под боковую панель:
.conteudo {
position: absolute;
top: 0;
left: 192px; // this is your sidebar width, according to your screenshot
}
Или если по какой-то причине вам нужно избегать абсолютного позиционирования, вы можете компенсировать его с помощью поля:
.conteudo {
margin-left: 192px; // this is your sidebar width, according to your screenshot
}
Если ваша боковая панель имеет фиксированную ширину, вы можете использовать отступ слева от контейнера содержимого ширины боковой панели. Или вы можете переместить его вправо и установить ширину с помощью функции CSS calc.
.conteudo {
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
float:right;
}
Используя ваш код и опцию заполнения:
.barralado {
position: fixed;
top: 0;
left: 0;
width: 300px;
}
.conteudo {
padding-left: 300px;
}
.conteudo .topo {
background-color: #ffffff;
}
.topo .titulo {
font-size: 4em;
color: white;
text-shadow: 2px 2px 1px rgba(150, 150, 150, 1);
margin-top: 3em;
margin-left: 3.5em;
}
Есть еще несколько способов, но, надеюсь, один из двух поможет вам добиться желаемого.