Такая проблема, есть макет 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;
}
Комментариев нет:
Отправить комментарий