Такая проблема, есть макет 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;
}
<header></header>
<div class="middle">
<aside class="left-sidebar">
<div class="blocks">
Блоки, должны быть всегда на виду
</div>
<footer>
Футер<br>всегда внизу
</footer>
</aside>
<main class="content">
Контент, должен быть прижат к низу
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>
</div>
Надо прижать .content
к низу и сделать так, чтобы меню всегда оставалось на виду (перемещалось вместе с прокруткой)
Сейчас у меня такие проблемы:
1) Черная полоска справа от aside
идет не до конца страницы, и фон aside
тоже
2) .blocks
должен прокручиваться вместе со страницей и не залезать на footer