用一个 div 填充剩余屏幕空间的高度
我目前正在开发一个 Web 应用程序，我希望内容填满整个屏幕的高度。
该页面有一个标题，其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。
我有一个 header
div
和一个 content
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%。放在
header
里面
content
不会让这个工作。
有没有办法在不使用的情况下达到相同的效果
table
？
更新：
内容中的元素
div
也将高度设置为百分比。因此，内部 100% 的东西
div
会将其填充到底部。 50% 的两个元素也是如此。
更新 2：
例如，如果标题占据屏幕高度的 20%，则在 50% 内部指定的表格
#content
将占用 40% 的屏幕空间。到目前为止，将整个东西包装在一张桌子上是唯一有效的方法。
-
<!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>在所有健全的浏览器中，您可以将“标题” div 作为同级放在内容之前，并且相同的 CSS 将起作用。但是，如果在这种情况下浮动为 100%，则 IE7- 不会正确解释高度，因此标题需要在内容中，如上所述。overflow: auto 将导致 IE 上的双滚动条（它始终使视口滚动条可见，但已禁用），但没有它，如果内容溢出，内容将被剪辑。
-
在 CSS 中确实没有一种可靠的、跨浏览器的方式来做到这一点。假设您的布局很复杂，您需要使用 JavaScript 来设置元素的高度。您需要做的事情的本质是：
Element Height = Viewport height - element.offset.top - desired bottom margin一旦您可以获取此值并设置元素的高度，您需要将事件处理程序附加到窗口 onload 和 onresize 以便您可以触发您的调整大小功能。
此外，假设您的内容可能大于视口，您将需要设置 overflow-y 来滚动。
发表回复