如何利用高度的其余部分在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");