可變高度的div

我創建了一個包含三個表格的頁面。第二個表格是在overflow: auto的div內。

我的問題正是在這張表中。我需要整個頁面的高度從未超過100％。
- 第一個表格應始終在頁面頂部可見;
- 第三張表應該始終在頁面底部可見;
- 第二張桌子的高度應根據完成瀏覽器100％的剩餘空間而變化。

有誰知道如何解決我的困境？

下面是代碼的演示：http://jsbin.com/omeRUtIr/7/edit?html,css,output 可變高度的div

來源

2014-02-10 Júlio Pradera

我想只使用CSS來做到這一點，如果可能的話。 –

查看鏈接@JamesDonnelly鏈接，類似於你之後的解決方案目前不存在。 – Nit

你需要做這樣的事情：

#header { 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    height: 50px; 
} 

#content { 
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    overflow: auto; 
    width: 100%; 
} 

#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
}

您可以在這裏看到的結果：http://jsbin.com/omeRUtIr/13/edit

你也可以用百分比（而不是例如固定高度），如果你想讓每個桌子都有三分之一的高度。你會得到這樣的東西：http://jsbin.com/omeRUtIr/15/edit。

來源

2014-02-10 15:54:35 j3r6me

您將高度設置爲頁眉和頁腳。我沒有兩者的高度。 =/ –

如果你想固定頂部和固定底部，你也想要有一個固定的高度，並使它不大。否則，它會填滿屏幕的大部分內容，而不會留下內容。另一種解決方案是使用百分比，如果你想每個表有三分之一的高度（我會用這個選項更新我的迴應）。 – j3r6me

感謝您的幫助，但爲第一個和第三個div的高度設置一個值，在這種情況下不是解決方案。我正在處理一個將被繼承的代碼。如果有一天某個人改變了這個屏幕，那麼得到這份工作的人最終會得到超過必要的工作。 –

可變高度的div

回答

相關問題