使div填充剩余屏幕空间的高度
我目前正在开发一个Web应用程序，我希望其中的内容能填满整个屏幕的高度。
该页面具有标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。
我有一个标题" div"和一个内容" div"。目前，我正在使用表格进行布局，如下所示：
CSS和HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
页面的整个高度已填满，不需要滚动。
对于内容div中的任何内容，设置top：0;会将其放在标题的正下方。有时，内容将是一张真实的桌子，它的高度设置为100％。将"标头"放入"内容"中将使其无法工作。
有没有一种方法可以在不使用table的情况下达到相同的效果？
更新：
内容div中的元素的高度也将设置为百分比。因此，在" div"内部100％的内容将填充到底部。两个元素的比例也将达到50％。
更新2：
例如，如果标题占据屏幕高度的20％，则在#content内指定为50％的表将占据屏幕空间的40％。到目前为止，将整个内容包装在表中是唯一有效的方法。
解决方案
如果唯一的问题是高度，则仅使用div似乎可行：
<div id="header">header content</div> <div id="content" style="height:100%">content content</div>
在一个简单的测试中，标题/内容的宽度在示例和我的示例中是不同的，但是我不确定从帖子中是否担心宽度？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
在所有合理的浏览器中，我们可以将" header" div作为同级放置在内容之前，并且相同的CSS也可以使用。但是，在这种情况下，如果float为100％，则IE7无法正确解释高度，因此，标题必须在内容中，如上。溢出：自动将导致IE上的双滚动条(始终具有可见的视口滚动条，但已禁用)，但是如果没有它，则内容将在溢出时被裁剪。
在CSS中，确实没有声音，跨浏览器的方式可以做到这一点。假设布局复杂，则需要使用JavaScript设置元素的高度。我们需要做的实质是：
Element Height = Viewport height - element.offset.top - desired bottom margin
一旦获得此值并设置元素的高度，就需要将事件处理程序添加到窗口的onload和onresize上，以便可以激发resize函数。
另外，假设内容可能大于视口，则需要设置溢出y来滚动。
Vincent，我将根据新要求再次回答。由于我们不关心内容是否太长而被隐藏，因此不需要浮动标题。只需将溢出隐藏在html和body标签上，然后将#content高度设置为100％。内容将始终比视口长标题的高度，但是它将被隐藏并且不会引起滚动条。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
