css/javascript - 如何實現這些不尋常的設計要求？

Question

我有一個頭div和頁腳div。標題div永遠不會移動;然而，無論屏幕大小如何，頁腳div都必須停留在窗口的底部，即「粘性頁腳」。在這兩個div之間是一個動態填充的內容div。

1. 內容div的底部直接坐在上面頁腳DIV，它必須上下移動與頁腳DIV（當屏幕尺寸垂直擴展和收縮）。它也可以被認爲是「粘。 「

2. 但是，如果有足夠的內容，內容div必須垂直擴展（內容div的底部仍然保留在頁腳div的正上方）以儘可能多地容納內容。這將發生，直到內容div的頂部運行到標題div ...

3. 然後，如果有太多內容顯示在頁眉和頁腳div之間，內容div將成爲可滾動的，高度的內容div收縮，以便永遠不會與標題div重疊或與頁腳div重疊。

4. 而且，內容div不能重疊標題div或頁腳div。如果兩個div之間沒有足夠的空間在一個視圖中顯示所有內容，則內容div必須變爲可滾動overflow-y: scroll;。

這說明我的（無果而終）嘗試至今：
我還沒有成功地完成所有的這一點。我所做的是最少的，而且基本上沒有用處。我遇到的一些問題是：如果我製作頁腳position: absolute; bottom: 0px;這將是一個「粘滯頁腳」，並保留在我的屏幕底部，而不考慮垂直屏幕尺寸。但是，憑藉這種絕對定位，內容div將與頁腳高興地重疊。我試圖通過製作內容div position: absolute; bottom: 180px;來防止這種情況發生。 180px是我的頁腳div的高度。這工作...一點點。當需要動態添加內容時，它會迅速成爲問題。內容div的頂部將很快與頭部div重疊...因此，然後我爲內容div設置了一個固定的高度，並在超過該高度時啓用滾動，但這並不考慮比我自己更大的屏幕可能會有更多顯示內容的空間。

最終，沒有一個工作方式我需要它。 使用CSS和/或JavaScript（如果需要）完成此操作的最佳方法是什麼？而且，是否有一個好的起點讓我走上正確的道路，你可能知道？

謝謝你的幫助！

Answer 1

我不認爲這是可能的CSS沒有flexbox。如果你幸運地只需要支持支持Flexbox的瀏覽器（或者，如果你能在舊的瀏覽器回落到標準佈局），你可以試試這個：

HTML：

<header></header> 

<div class="content"> 
    <div class="container"></div> 
</div> 

<footer></footer> 

CSS：

header, footer { 
    position: fixed; 
    left: 0; right: 0; 
    height: 100px; 
} 

header { top: 0 } 
footer { bottom: 0 } 

.content { 
    position: fixed; 
    top: 100px; bottom: 100px; 
    left: 0; right: 0; 
    overflow-y: scroll; 

    display: -webkit-flex; 
    display: -moz-flex; 
    display: -o-flex; 
    display: flex; 

    -webkit-align-items: flex-end; 
    -moz-align-items: flex-end; 
    -o-align-items: flex-end; 
    align-items: flex-end; 
} 

這裏的小提琴：http://jsfiddle.net/qhKa9/

---

如果您依靠JavaScript沒有任何問題，那麼可能會有一個不同的解決方案，並具有更深的瀏覽器支持。這裏有一個鏡頭。

CSS：

header, footer { 
    position: fixed; 
    left: 0; right: 0; 
    height: 100px; 
} 

header { top: 0 } 
footer { bottom: 0 } 

.content { 
    position: fixed; 
    top: 100px; bottom: 100px; 
    left: 0; right: 0; 
    overflow-y: scroll; 
} 

.container { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

的JavaScript（用了jQuery）：

var $content = $('.content'), 
    $container = $('.container'), 
    containerHeight = $container.outerHeight(); 

$(window).resize(function() { 
    $container.css({ 
     position: $content.innerHeight() > containerHeight ? 'absolute' : 'static' 
    }); 
}).resize(); 

這裏的小提琴：http://jsfiddle.net/N672c/

附：您應該可能調整事件偵聽器的大小throttle，但這是a discussion for another day。