Javascript 将可滚动div粘贴到屏幕底部

我有一个使用jquery、jquery mobile、iscroll和iscrollview的cordova应用程序

我并不完全致力于这些工具

我已经将jquery移动页眉/页脚粘贴到屏幕的顶部和底部

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

这是棘手的部分。我想将可滚动div的底部粘贴到页脚的顶部。当我向div添加内容时，我希望最近添加的内容最靠近页脚顶部，这样可滚动div的顶部看起来像是随着数据的添加而向页眉底部向上生长

一旦可滚动div的顶部被其内容填充，那么我希望能够滚动它

---

有人能做到这一点吗？

给你一个小技巧

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

强制内容同时具有顶部和底部的巧妙之处在于，它可以拉伸div，使其始终保持适当的高度。如果在其上指定了高度，则它将不起作用，但由于高度由“顶/底”属性确定，因此它是动态的。我想这会让你到达你想去的地方

编辑：

---

编辑2-强制内容从底部增长

我不确定这是否是一个好主意，也不确定我是否会认真推荐这样做。但是，使用垂直对齐可以强制内容从底部增长。我想最好是用javascript设置一个空白，随着内容的增长而缩小，但是。。。也许不是。综上所述，这里有一种使用CSS的方法

这需要对content div进行一点重构

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

如果您希望滚动条在内容进入时保持在底部，则需要执行一些javascript（很容易用谷歌搜索）

---

我对这样做并不完全满意，因为如果将高度设置为100%或宽度设置为100%，content div从一开始就会自动获得一个滚动条。然而。。。它看起来相当不错，应该可以在大多数（如果不是所有）浏览器中使用。

这几乎是完美的。滚动效果很好。但这会将content div附加到屏幕顶部。我需要将content div附加到屏幕底部，以便在添加数据时，它向顶部增长。@user1126515我用底部不断增长的内容更新了我的答案。这有点麻烦，但应该可以。很抱歉耽搁了这么久。我今天才回到这里，它并没有让我在使用cordova的android上增加内容。

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

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

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