Question

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

我有一个带有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'
});
});

谢谢！

Answer 1

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

更改您的功能如下。

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

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

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

1 个答案: