Отзывчивая прокрутка div высота

Question

У меня есть нижний колонтитул, который исправлен. У меня есть заголовок, который является относительным. В промежутке между этими контейнерами есть контент, который установлен на overflow-y: auto. Значение полосы прокрутки должно отображаться только в этом контейнере div. У меня есть контейнер вокруг этого содержимого div. Высота для этого div устанавливается в пикселях, потому что при использовании процента он автоматически переходит на 100%, а полоса прокрутки не видна. Он отлично выглядит на 100% без изменения высоты экрана. Однако, если пользователь должен был изменить высоту экрана - пользователь не может видеть весь контент в div, потому что фиксированный нижний колонтитул теперь покрывает это. Когда пользователь масштабируется, между нижним колонтитулом и деком находится пробел. Мне бы хотелось, чтобы при масштабировании пользователя не было пробела, и когда пользователь меняет высоту экрана, пользователь может просматривать все содержимое.

HTML

<div class="top-container"> 
</div> 
<div class="container"> 
<ul> 
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> 
</ul> 
</div> 
<footer> 

</footer> 

CSS

.top-container { 
position: relative; 
z-index: 6; 
background: #fff; 
padding: 40px 40px 0; 
bottom: 0; 
width: 100% 
} 
.container { 
padding: 10px 0; 
margin: 0 .6%; 
} 
ul { 
padding-top: 2px; 
height: 437px; 
overflow-y: auto; 
overflox-x: hidden; 
} 
footer{ 
background: #fff; 
padding: 20px 50px; 
overflow: hidden; 
position: fixed; 
z-index: 5; 
left: 0; 
bottom: 0; 
width: 100%; 
} 

JSFIddle Это JSfiddle не точно показать мою проблему. Полоса прокрутки должна отображаться только в содержимом, а не в заголовке. Это то, что сейчас.

Благодаря

Answer 1

.top-container { 
 
    position: relative; 
 
    z-index: 6; 
 
    background: #fff; 
 
    padding: 40px 40px 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    max-height: 60px; 
 
    background: green; 
 
} 
 
.container { 
 
    padding: 10px 0; 
 
    margin: 0 .6%; 
 
    overflow-y: scroll; 
 
    height: calc(100vh - 100px); 
 
    background: blue; 
 
} 
 
ul { 
 
    padding-top: 2px; 
 
    height: 437px; 
 
    overflow-y: auto; 
 
    overflox-x: hidden; 
 
} 
 
footer{ 
 
    background: #fff; 
 
    padding: 20px 50px; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    z-index: 5; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
body{ 
 
    max-height: 90vh; 
 
    } 
 
footer{ 
 
    background: red; 
 
    max-height: 40px; 
 
}

<div class="top-container"> 
 

 
</div> 
 
<div class="container"> 
 
    <ul> 
 
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> 
 
    </ul> 
 
</div> 
 
<footer> 
 

 
</footer>

Вот обновленный jsFiddle

Answer 2

.top-container { 
position: relative; 
z-index: 6; 
background: #fff; 
padding: 40px 40px 0; 
bottom: 0; 
width: 100% 
} 
.container { 
padding: 10px 0; 
margin: 0 .6%; 
} 
ul { 
padding-top: 2px; 
//height: 437px; 
overflow-y: auto; 
overflox-x: hidden; 
} 
footer{ 
background: #fff; 
padding: 20px 50px; 
overflow: hidden; 
z-index: 5; 
width: 100%; 
} 

Является ли это то, что вы хотите?