javascript - 防止 jquery slimscroll 条在缩放时覆盖绝对定位的 div

Question

我在开发网站的一部分时遇到了问题。

我有一个包含 jquery slimscroll 的列，底部有一个绝对的 div (.footer)。它必须在底部，因为即使用户缩放页面我也希望它在那里。 柱子相对于顶部定位，这是设计所必需的。 有没有办法只用 CSS 来防止 slimScroll 流入页脚？或者我必须使用特殊的 JQuery 代码吗？我应该怎么做？

基本上，我希望 SlimScroll div 填充 .container div，只要它不与 .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'
    });
});

您可能需要同时设置一些填充。