将可滚动的div粘到屏幕底部

Question

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

我不太喜欢这些工具。

我已经把jquery-移动页眉/页脚粘在屏幕的顶部和底部了。

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

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

一旦滚动div的顶部是按其内容文件，那么我想能够滚动它。

有人能做到这样的事情吗？

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;
}

强迫.content同时拥有一个顶部和一个底部的好处是，它扩展了div，使其始终是合适的高度。如果您在上面指定了高度，它就不能工作，但是由于高度是由顶部/底部属性决定的，所以它是动态的。我觉得这能让你达到你想去的地方。

这里有把小提琴

编辑：以下是内容显示的样子

编辑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;
}

它看起来像这样，有一点内容

它看起来像这样有很多内容

如果您希望滚动条在内容出现时保持在底部，则需要执行一些javascript操作(很容易在google上搜索)。

我对这样做并不完全满意，因为如果设置高度100%或宽度100%，内容div从一开始就会自动获得滚动条。然而..。它看起来很不错，应该在大多数浏览器(如果不是全部的话)都能工作。