如何利用高度的其餘部分在HTML佈局

Question

我的問題很簡單，我有三個div在我的佈局：

<div id="header">90px height</div> 
<div id="content">the rest of the height of the window</div> 
<div id="footer">20px height</div> 

現在，我希望#contentdiv填補其餘窗戶。我怎樣才能做到這一點？

謝謝。

Answer 1

................. Live demo .....................

你好，現在你可以使用positionabsolute和fixed

像這樣

的CSS

#header{ 
height:90px; 
    background:red; 
} 

#content{ 
background:yellow; 
    position:absolute; 
    left:0; 
    right:0; 
    top:90px; 
    bottom:20px; 
} 

#footer{ 
height:20px; 
    background:green; 
    position:fixed; 
    left:0; 
    right:0; 
    bottom:0; 
} 

Live demo

Answer 2

添加了jQuery找出窗口的高度

var h = $(window).height(); 
$("#content").css("height", h); 

如果你想寬度

var w = $(window).width(); 
$("#content").css("width", w); 

Answer 3

var height = $(window).height() - $("#header").height() - $("#footer").height(); 

$("#content").height(height + "px");