Как пофиксить вылетание элемента меню во всю высоту?

Question

[gleendo]

В общем пытался сверстать меню, примерно похожее на:


Ну по виду вроде похоже, но вот техническая реализация думаю через одно место, сомневаюсь на счет правильности верстки.
Вот что получилось:


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


Как это пофиксить, или как вообще правильно сверстать такое меню?

Ссылка на codepen

Сижу уже 4782734895723 дней изучаю верстку, а все нормально верстать не могу научиться, постоянно всего не знаю. И стопор даже на таких вот демках((

Comments

[Вадим]

без кода сложно сказать где ошибка

[gleendo]

Вадим: Ссылка же на codepen есть

[Илья Морунов]

Проблемы возникать будут почти на любом макете :) Просто необходим опыт и умение гуглить.

[gleendo]

Илья Морунов: Да вот нагуглил, порешал проблему, даже лучше получилось чем хотел.) Вроде как понял как все делается, надеюсь закрепится в памяти.
А на счет опыта, то у меня с ним кпц какие проблемы. Изучаю верстку уже 5789374598723485934 дней, а вот ни одного макета полностью не сверстал, постоянно какие то мелкие демки, а за полностью макет как то страшно браться, вернее хочется, но всегда когда смотрею на макет какой нибудь, в голове уже все переворачивается и не знаю даже с чего начать, постоянно кажется что все через одно место делаю, а хочется нормально уметь делать. В общем проблемы у меня, все никак не могу себя настроить на верстку полных макетов. Не хватает настравничества, пару макетов хотябы сверстать, чтобы перестать "бояться" верстать полные макеты, да и научиться уже их наконец то верстать.
Вроде как теоретическая база думаю не плохая, а вот как верстать проекты хз, даже не понимаю как архитектурно разбивать файлы для удобства верстки, не понимаю в общем многих вещей, которые станут ясны только на верстке полного макета, а не каких то мелких демках...

Answer 1

[HamSter]

Что мешает меню задать

position: fixed\absolute; top: 0; bottom: 0; left: 0; width: 50px;

?

Comments

[gleendo]

HamSter ну если fixed указать то скрола же не будет, и если добавить контент, то он будет скролиться при небольшой высоте, а вот меню будет фиксировано и часть просто не булет видно.
storage1.static.itmages.ru/i/16/0623/h_1466698905_...

[HamSter]

тогда добавить еще overflow-y: scroll; + с можно с учетом media screen and(max-height: ... px;) { ... }

[gleendo]

HamSter:
media (max-height 480px)
overflow-y scroll
width 85px

Добавил media, более менее выглядит, но вот этот скролл, везде ширина скролла разная же, поэтому и ширина меню будет везде разная.

А вообще если взглянуть на разметку и стили, нормально ли все сделано или можно лучше? Просто хочется профессионално верстать, но вот постоянно какие то стопоры, и не знаю как то или иное лучше верстать. Постоянно кажется что через одно место с костылями по бокам все верстаю...

[HamSter]

con_: да нормально все в верстке. Мне, кажется, у всех такое бывает, когда на чем-то (простом) запинаешься ))

Answer 2

[Вадим]

main-nav
min-height: 100%;
display: table;
height: 100vh;