坚持滚动的div屏幕

Question

我使用jQuery，jQuery的移动，iscroll和iscrollview

我不完全致力于任何这些工具得到了科尔多瓦的应用程序的底部。

我有jquery-mobile头/页脚卡住屏幕的顶部和底部就好了。

我有一个可滚动的div之间的页眉和页脚。它将包含可变数量的数据。有时数据会低于div的高度，有时它会更大（因此滚动）

这是棘手的部分。我想将可滚动div的底部粘贴到页脚的顶部。当我将东西添加到div时，我希望最近添加的页面最靠近页脚的顶部，因此可滚动div的顶部看起来像是在添加数据时它向上朝向页眉底部向上生长。

一旦可滚动的div的顶部是fille的内容，然后我想能够滚动它。

有没有人能够实现这样的事情？

Answer 1

这是一个整洁的小技巧给你。

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div> 

现在CSS

div { 
    width: 100%; 
} 

.header { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 50px; 
} 

.footer { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    height: 100px; 
} 

/* the magic */ 
.content { 
    position: absolute; 
    top: 50px; /* matches height of header */ 
    bottom: 100px; /* matches height of footer */ 
    left: 0px; 
    overflow: scroll; 
} 

有关强制的。内容有两个顶部和底部的妙处是，它延伸的股利，以便它总是适当的高度。如果你指定了高度，它将不起作用，但是因为高度是由顶部/底部属性决定的，所以它是动态的。我认为这会让你到你想要的地方。

Here's a fiddle

编辑：Here's what it looks like with content

---

编辑2 - 迫使含量从底层成长。

我不确定这是一个好主意，我不确定我是否会认真推荐这样做。但是，使用垂直对齐可以强制内容从底部增长。我怀疑用JavaScript设置一个边缘会随着内容的增长而缩小，但可能不会。综上所述，这里的一个用CSS做事情的方法。

这需要对内容div进行一些重构。

<div class="content"> 
    <span class="margin"></span> 
    <span class="inner"></span> 
</div> 

和更有点CSS

span.left-margin { 
    height: 98%; 
    width: 0px; 
    display: inline-block; 
} 

span.inner { 
    width: 99%; 
    background-color: white; 
    display: inline-block; 
    vertical-align: bottom; 
} 

It looks like this with a little content

It looks like this with a lot of content

如果你想滚动条粘在底部的内容进来，你需要做一些JavaScript（易于谷歌它）。

我并不完全满意这种方式，因为如果你设置高度100％或宽度100％，内容div会从头开始自动获取滚动条。但是...它看起来不错，应该可以在大多数（如果不是全部的话）浏览器中工作。