拆分視圖與一個面板可滾動

我想實現一個佈局，其中有一個最大高度，並在裏面，有兩個div。一個div（頁腳），具有固定的高度（55px）。另一個是可滾動的div，其高度根據其內容增加/減少。拆分視圖與一個面板可滾動

<div class="parent"> 
    <div class="wrapper"> 
    <div class="panel"> 
     Scrollable Div 
    </div> 
    <div class="fixed"> 
     Fixed footer 
    </div> 
    </div> 
</div>

可滾動的div高度應該始終適合它的內容。但是當超過最大高度時（.wrapper has a max-height of 300px），它應該只佔用剩餘空間減去頁腳高度而不影響頁腳的位置。

但是我實現這種佈局不符合我的要求。

在我的示例中，當內容被添加到可滾動的div中時，頁腳被從包裝中取出。應該發生的事情是頁腳停留在包裝的底部（沒有被切斷），滾動的div向上跨越其高度。

請注意我正在嘗試不使用position：fixed或absolute。

這是一個移動應用程序，所以固定位置會導致大量的錯誤。

這裏是我迄今爲止的JS小提琴， fiddle

來源

2016-08-11 user3607282

設置max-height:300px到.panel DIV而不是

JS小提琴here

來源

2016-08-11 12:45:10 jonju

拆分視圖與一個面板可滾動

回答

相關問題