我在开发网站的某个部分时遇到了问题。
我有一个带有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'
});
});
谢谢!
答案 0 :(得分:0)
您是否尝试使用height : 'Auto';
更改您的功能如下。
$(function(){
$('.content').slimScroll({
height: 'auto'
});
});
您可能需要设置一些填充。