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

Question

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

我并不是完全致力于这些工具中的任何一个。

我已经将 jquery-mobile 页眉/页脚固定在屏幕的顶部和底部，效果很好。

我在页眉和页脚之间有一个可滚动的 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 同时具有顶部和底部的巧妙之处在于，它会拉伸(stretch) div 以使其始终保持正确的高度。如果你在上面指定了高度，它就不会工作，但因为高度是由 top/bottom 属性决定的，所以它是动态的。我认为这会让你到达你想去的地方。

Here's a fiddle

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

---

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

我不确定这是个好主意，而且我不确定我是否会认真推荐以这种方式做事。但是，使用 vertical-align 可以强制内容从底部增长。我怀疑最好只使用随着内容增长而缩小的 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(很容易用 google 搜索)。

我对以这种方式做事并不完全满意，因为如果您将高度设置为 100% 或将宽度设置为 100%，内容 div 会从一开始就自动获得一个滚动条。然而......它看起来相当不错，应该适用于大多数(如果不是全部)浏览器。