У вас в верстке ошибка как мне кажется.
Не нужно давать html тегу скриптом высоту. Это делается написал в css тегу
html, body height: 100%.
До кучи еще скажу не нужно давать body width: 100%. Это блочный элемент. Он и так растянется на весь экран.
Класс
middle и лежащий в нем первый
container имеют высоту 0. Это потому что вы выбили из потока абсолютным позиционированием(покой то черт) элемент
.contentMainBox.
Что вам мешает заверстать без позиционирования?
Как всем должно быть известно,
height: 100% растягивается на 100% от высоты родительского блока, а не экрана.
У ваших
aside блоков очень много лишних тегов. Сверстать все можно без позиционирования.
К тому же добавлю, что float не будет работать при абсолютном позиционировании. Зачем его тогда писать? А зачем position: relative, когда вы пишите absolute?
К тому же очень много вложенных дивов. Можно было просто обойтись одним тегом
main для контента.
Вот ваше решение, которое должно помочь и ничего лишнего.
1) Удаляем
wrapper и тегу
body даем overflow: hidden
2) Замените разметку тега main на эту.
<div class="main-scroll">
<main class="content">Содержимое</main>
</div>
3) Теги aside поставьте перед тегом main и замените их стили на эти
.wrapper{
min-height: 100%;
height: 100%;
overflow: hidden;
position: relative;
box-shadow: 0 0 24px rgba(0,0,0,0.58);
background: #fff;
}
.left-sidebar {
float: left;
width: 90px;
height: 100%;
position: relative;
background: #B5E3FF;
background-image: -webkit-linear-gradient(top, #24323f, #75887e);
background-image: -o-linear-gradient(top, #24323f, #75887e);
background-image: -ms-linear-gradient(top, #24323f, #75887e);
background-image: linear-gradient(top, #24323f, #75887e);
background-image: -moz-linear-gradient(top, #24323f, #75887e);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#24323f, endColorstr=#75887e)";
}
.right-sidebar {
float: left;
width: 400px;
background: #fff;
height: 100%;
position: relative;
box-shadow: 0 0 21px rgba(92, 92, 92, 0.39);
}
.main-scroll {
overflow-y: scroll;
height: 100%;
margin-left: 490px;
}
.content {width: 840px;}
4) Код должен выглядеть так
<body>
<aside class="left-sidebar"></aside>
<aside class="right-sidebar"></aside>
<div class="main-scroll">
<main class="content">Содержимое</main>
</div>
</body>
Вроде ничего не забыл
Средний