html - 如何利用 HTML 布局中的剩余高度

Question

我的问题很简单，我div的布局中有三个 s：

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

现在，我想要#content div填充窗口的其余部分。我怎样才能做到这一点？

谢谢。

Answer 1

........现场演示............

嗨，现在你可以习惯position absolute和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;
}

现场演示

Answer 2

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

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

Answer 3

添加jquery查找窗口高度

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

如果你想要宽度

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