Страницы

Поиск по вопросам

суббота, 27 октября 2018 г.

Верстка каркаса html шаблона

Такая проблема, есть макет https://jsfiddle.net/61htzzrx/
header { background-color: #FBD293; border-bottom: 1px solid #000; height: 50px; } .middle { border-right: 1px solid #000; margin: 0 auto; min-height: calc(100% - 50px); overflow: hidden; position: relative; width: 600px; background-color: #fff; } .middle > .left-sidebar { background-color: #CBE6A3; border-right: 1px solid #000; box-sizing: border-box; display: block; float: left; min-height: calc(100vh - 50px); padding-bottom: 160px; width: 100px; } .left-sidebar > .blocks { background: #e6a3a3; height: 400px; } .middle > .content { background: #A3CCFF; display: block; float: left; min-height: calc(100vh - 50px); width: 500px; } .left-sidebar footer { height: 100px; bottom: 0; position: absolute; background: #D6A3E6; }

Контент, должен быть прижат к низу






















































Надо прижать .content к низу и сделать так, чтобы меню всегда оставалось на виду (перемещалось вместе с прокруткой)
Сейчас у меня такие проблемы:
1) Черная полоска справа от aside идет не до конца страницы, и фон aside тоже
2) .blocks должен прокручиваться вместе со страницей и не залезать на footer


Ответ

Сайдбар клеится внутрь блока при помощи position: sticky, для кроссбраузерности не забудьте использовать полифилл. Остальное — флексбокс.
*, *:after, *:before { box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; } header { background-color: #FBD293; border-bottom: 1px solid #000; height: 50px; width: 600px; } .middle { border-right: 1px solid #000; margin: 0 auto; width: 600px; background-color: #fff; display: flex; flex-grow: 1; } .left-sidebar { position: relative; background-color: #CBE6A3; border-right: 1px solid #000; display: flex; flex-direction: column; flex-basis: 100px; } .left-sidebar__blocks-holder { position: relative; flex-grow: 1; } .blocks { background: #e6a3a3; height: 400px; position: sticky; top: 0; } .content { background: #A3CCFF; min-height: 800px; flex-grow: 1; } .left-sidebar footer { height: 100px; background: #D6A3E6; }

Контент, должен быть прижат к низу

Комментариев нет:

Отправить комментарий