I encountered an issue while working on a section of my website.
In one of the columns, I have implemented a jQuery slimscroll, along with a div (.footer) that is absolutely positioned at the bottom. It is crucial for the footer to remain at the bottom, even if the user zooms in on the page. The column is positioned relative to the top as per the design requirements. Is there a CSS-only solution to prevent the slimScroll from overlapping into the footer? Or would I need to use specific jQuery code for this purpose? How can I achieve this?
Essentially, I want the SlimScroll element to fill the .container div without encroaching on the .footer.
Fiddle: Link
Here is the 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>
And the 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; }
The JQuery:
$(function(){
$('.content').slimScroll({
height: '450px'
});
});
Thanks!