Question

我使用jquery，jquery-mobile，iscroll和iscrollview

获得了一个cordova应用程序

我并没有完全致力于这些工具。

我已经将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;
}

强制.content同时具有顶部和底部的巧妙之处在于它会拉伸div，使其始终保持适当的高度。如果你指定它的高度，它将无法工作，但由于高度由顶部/底部属性决定，它是动态的。我想这会让你到达你想去的地方。

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（很容易谷歌）。

我不喜欢这样做，因为如果你设置高度100％或宽度100％，内容div会从头开始自动获取滚动条。但是......它看起来很不错，应该适用于大多数（如果不是全部）浏览器。

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

1 个答案: