Как растянуть абсолютно позиционированный сайдбар по высоте на 100%?

Question

[mkmister]

Как растянуть абсолютно позиционированный сайдбар по высоте на 100%?

Собственно, начинающий fronte-end dev. Верстаю шаблон, где боковая панель(играющая роль меню) должна выпадать поверх всего остального контента.

Скрин того что должно быть:

Скрин того что есть:
Я бьюсь уже 2 час над этим вопросом, пробовал js(растягивать сайдбар по высоте body), таблицы, position: fixed не вариант, так как не видно контента сайдбара.


Единственный костыль, который дает близкий к желаемому результат это:

margin-bottom: -100%;
padding-top: 100%;

Но из-за этого сильно растягиваются элементы самого сайдбара и к тому же после footer остается пустое место.

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

Собственно сам проект на github: Git

Также буду благодарен за код ревью.

Comments

[Алексей Струков]

меню выдвигается или фиксированное?

[mkmister]

Алексей Струков: Оно должно выдвигаться, но сжимать основной контент

[Алексей Струков]

это выдвигание уже реализовал?

[mkmister]

Алексей Струков: нет, но планировал с помощью js по клику на иконку бургера вешать класс сайдбару, он либо просто появлялся бы, либо transform + transition

[Алексей Струков]

mkmister: А контент долден уезжать за пределы экрана, когда выдвигается меню или должен просто сужаться?

[mkmister]

Алексей Струков: Основной контент скажем блоки header, main, footer должны быть на месте, имеется в виду НАЛОЖЕНИЕ через z-index, то есть сайдбар z-index: 3; все остальное z-index: 0;

[Алексей Струков]

mkmister: ясно. ну тогда проблем нету. Делай ему position: absolute; top: 0; left: 0; height: 100% и убирай за пределы экрана. По нажатию гамбургера - выдвигай через translate

[mkmister]

Алексей Струков: Эм, как бы вот что уже есть и не работает:
display: block;
position: absolute;
width: 28.125%;
min-height: 100%;
top: 0;
left: 0;
padding-right: 1.38888888888889%;
padding-left: 5.55555555555556%;
background-color: #181818;
z-index: 3;

[Алексей Струков]

mkmister: width поставь фиксированным числом типа 200px
вместо min-height попробуй bottom: 0;
паддинг тоже фиксированным сделай типа 1rem

[mkmister]

Алексей Струков: безрезультатно

Answer 1

[WQP]

Через js вычисляй высоту и приписывай её к блоку.
Высота b-aside-left = высоте b-main content-width

Нужен где-то clearfix https://yadi.sk/i/fHORod9gtpMuP

Comments

[mkmister]

А почему "b-main content-width" а не body/html ?

[WQP]

mkmister: body, ошибся

[mkmister]

WQP: Читайте внимательно: "пробовал js(растягивать сайдбар по высоте body), таблицы, position: fixed не вариант, так как не видно контента сайдбара."

[mkmister]

WQP: Хотя, каким именно способом вы получаете высоту body? И да действительно надо поискать где clearfix нужен, спасибо ))

[WQP]

mkmister: просто навёл на body в инструментах разработчика

Answer 2

[olegshilov]

как то так jsbin.com/diwexul/5

Answer 3

[Андрей Федоров]

.sidebar {
min-height: 100vh;
box-sizing: border-box;
margin: 0;
}

Comments

[mkmister]

Не работает, да и box-sizing здесь причем? И да пробовал я min-height: 100vh;

[Андрей Федоров]

mkmister: для .b-aside-left дайте position: fixed;