Div來填充剩下的垂直空間

我有一個複雜的HTML應用程序，所以很遺憾不能真正提供代碼示例。我們試圖讓div（紅色突出顯示）填充剩餘的垂直空間（請參見圖片）。Div來填充剩下的垂直空間

Application

該應用程序包含一個報頭（在黑色）的，可以在其上駁回或調整左側欄（注意：水平分量正確調整大小）。在側邊欄的右側是另一個div（mainDiv）。 mainDiv在控件的頂部包含一個div，並在其下面有一個用於數據表的div（用紅色突出顯示）。

此表可能包含大量數據，因此如果數據不適合屏幕，它需要自己的滾動條。

我們只是想讓表格填充所有可用的水平和垂直空間。我們似乎無法使其工作。

我們已經創建了一個jsfiddle示例來盡我們所能展示我們的佈局。這可以看到here。我們只是想要這個div（在jsfiddle中div被稱爲「tablewrap」）來佔用剩下的所有空間。

代碼（來自的jsfiddle）如下：

HTML

<div class="header">Header</div> 
<div class="sidebar">This is the sidebar</div> 
<div class="tablewrapper"> 
    <div class="tableheader-controls-etc"></div> 
    <div class="tablewrap">table</div> 
</div>

CSS

.header { height: 50px; background:black; color:white; } 
.sidebar { height:100%; position:fixed; width 200px; background:gray; color:white; } 
.tablewrapper{ float:right; width:75%; border:1px solid; margin-top:30px; margin-right:30px;} 
.tableheader-controls-etc { height:150px; background:blue; color:white; } 
.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto;}

如果任何人都可以提供一個解決方案，將是巨大的。我們更喜歡CSS，但可以處理Javascript。

感謝，菲爾

來源

2013-04-08 Phil

給出tablewrap和tablewrapper高度佔總高度的百分比。同時，爲它們添加一個最小高度屬性，以確保其高度不會低於某個值。 – 2013-04-08 09:26:24

根據您的身高添加最小高度.tablewrap {height：200px;邊框：2px純紅色;寬度：100％;溢出：自動;最小高度：240px;} http://jsfiddle.net/8pPPm/3/ – defau1t 2013-04-08 09:29:05

關鍵是要設置position: absolute，然後調整頂部，底部，左側和右側屬性。見fiddle和explanation。

.tablewrap { 
    position: absolute; 
    top: 240px; 
    bottom: 0; 
    left: 150px; 
    right: 40px; 
    height: auto; 
    width: auto; 
    ... 
}

來源

2013-04-08 09:37:25 mb21

如果藍色div具有動態高度，則不起作用。是的，我知道示例小提琴的固定高度爲150px，但在截圖中它似乎不同。 – TheBronx 2013-04-08 09:48:26

非常感謝！您的解決方案使我們走上了正確的軌道，現在我們的應用程序中有一個調整大小的表格。謝謝！ – Phil 2013-04-08 09:55:24

看看這段代碼：http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/記住這個解決方案將失敗，如果你有動態股利。也就是說，沒有固定高度的div。 – TheBronx 2013-04-08 09:58:53

你可以試試這個：

.tablewrap { height: 200px; border: 2px solid red; width:100%; overflow:auto; min-height:300px}

（只要你想設置的最小高度）

來源

2013-04-08 09:26:14

那麼，現在是時候說出你可能不想聽到的嘿嘿：你不能用CSS做到這一點。

你必須使用JavaScript，以便找到了兩件事情：

視口高度
控制DIV高度

一旦你知道那兩個高度，你可以設置你的工作臺高度到：

finalHeight = viewport - (controls+header+footer)

如果頁眉和頁腳也有動態高度，請使用jav ascript來計算它們。

您還需要在窗口調整大小時重新計算此高度。當然，如果javascript被禁用，你的佈局將無法工作。

來源

2013-04-08 09:53:25 TheBronx

Div來填充剩下的垂直空間

回答

相關問題