堅持滾動的div屏幕

Question

我使用jQuery，jQuery的移動，iscroll和iscrollview

我不完全致力於任何這些工具得到了科爾多瓦的應用程序的底部。

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

有關強制的。內容有兩個頂部和底部的妙處是，它延伸的股利，以便它總是適當的高度。如果你指定了高度，它將不起作用，但是因爲高度是由頂部/底部屬性決定的，所以它是動態的。我認爲這會讓你到你想要的地方。

Here's a fiddle

編輯：Here's what it looks like with content

---

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

It looks like this with a little content

It looks like this with a lot of content

如果你想滾動條粘在底部的內容進來，你需要做一些JavaScript（易於谷歌它）。

我並不完全滿意這種方式，因爲如果你設置高度100％或寬度100％，內容div會從頭開始自動獲取滾動條。但是...它看起來不錯，應該可以在大多數（如果不是全部的話）瀏覽器中工作。