防止jquery slimscroll bar在缩放时覆盖绝对定位div

时间:2015-04-08 09:59:37

标签: javascript jquery html css css3

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

我有一个带有jquery slimscroll的列,并且底部有一个div(.footer)绝对位置。它必须在底部,因为即使用户缩放页面我也希望它在那里。 该列与顶部相对应,这是必要的,因为设计。 有没有办法只使用CSS来防止slimScroll流入页脚?或者我必须使用特殊的JQuery代码?我该怎么做?

基本上,我希望SlimScroll div填充.container div,只要它不与.footer重叠。

小提琴: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'
});
});

谢谢!

1 个答案:

答案 0 :(得分:0)

您是否尝试使用height : 'Auto';

更改您的功能如下。

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

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