Запретить jQuery slimscroll bar от наложения абсолютного положения div внизу при масштабировании

Question

У меня возникла проблема при разработке раздела моего сайта.

У меня есть столбец с jquery slimscroll в нем и абсолютный div (.footer), расположенный на дне. Он должен быть внизу, потому что я хочу, чтобы он был там, даже если пользователь увеличивает масштаб страницы. Столбец позиционируется относительно верхней части, это необходимо из-за дизайна. Есть ли способ только с CSS, чтобы предотвратить переход slimScroll в нижний колонтитул? Или мне нужно использовать специальный код JQuery? Как мне это сделать?

В принципе, я хочу, чтобы SlimScroll div заполнял div .container до тех пор, пока он не перекрывает .footer.

Fiddle: Link

Вот HTML:

<div class="Wrapper"> 
<div class="container"> 
    <div class="content"> 
     <div class="message">asdasd </div> 
     <div class="message">asdasda </div> 
     <div class="message">asdasd </div> 
     <div class="message">asdasd </div> 
     <div class="message">asdasd </div> 
     <div class="message">asdasd </div> 
     <div class="message">asdasdasd </div> 
     <div class="message">asdasdasd </div> 
     <div class="message">asdasdasd </div> 
     <div class="message"> asdasd</div> 
     <div class="message">asdasd </div> 
     <div class="message">asdasd </div> 
     <div class="message">asdasd </div> 
     <div class="message"> asdasd</div> 
     <div class="message">asdasdasd </div> 
    </div> 
</div> 
<div class="footer"> </div> 

И CSS:

.Wrapper { 
position:relative; 
height:90vh; 
background-color:gray; 
width: 300px; 
margin:0 auto; 
margin-top:50px; } 

.container { 
width:300px; 
height:70vh; 
background-color:lightgray; } 

.content { 
max-width:300px; 
height:70vh; 
position:relative; 
overflow:hidden; } 

.message { 
border: 2px solid red; 
height: 80px; 
width:296px; } 

.footer { 
position:absolute; 
background-color:cyan; 
width:300px; 
height:100px; 
bottom:0px; } 

JQuery:

$(function(){ 
$('.content').slimScroll({ 
    height: '450px' 
}); 
}); 

Спасибо!

Answer 1

ли вы попробовать с height : 'Auto';

Изменение функции, как показано ниже.

$(function(){ 
    $('.content').slimScroll({ 
     height: 'auto' 
    }); 
}); 

Возможно, вам понадобится установить прокладку вместе с этим.