將可滾動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同時具有頂部和底部的巧妙之處在於，它會拉伸div使其始終保持適當的高度。 如果在其上指定了高度，它將無法正常工作，但是由於高度是由top / bottom屬性確定的，因此它是動態的。 我認為這可以使您到達想要的位置。

這是一個小提琴

編輯： 這是內容的樣子

---

編輯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從一開始就會自動獲得滾動條。 但是...看起來不錯，並且可以在大多數（如果不是全部）瀏覽器中使用。