html - HTMLレイアウトで残りの高さを利用する方法

Question

私の質問は単純ですdiv。レイアウトに3つあります。

<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

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");