我正在开发一个网络应用程序,我希望内容能够填满整个屏幕的高度。
该页面有一个标题,其中包含一个标志和账户信息。这可能是一个任意的高度。我希望内容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%。把header
放在content
里面将不允许这样做。
有什么方法可以在不使用`table'的情况下达到同样的效果吗?
更新:
内容div
内的元素也会被设置为百分比高度。因此,在div
内100%的东西将填充到底部。两个50%的元素也是如此。
更新2:
例如,如果标题占据了屏幕高度的20%,那么在#content
内指定50%的表格将占据屏幕空间的40%。到目前为止,将整个内容包裹在一个表格中是唯一可行的方法。
在CSS中真的没有一个健全的、跨浏览器的方法来做到这一点。 假设你的布局有复杂性,你需要使用JavaScript来设置元素的高度。 你需要做的事情的本质是。
Element Height = Viewport height - element.offset.top - desired bottom margin
一旦你能得到这个值并设置元素的高度,你就需要将事件处理程序附加到窗口的onload和onresize上,这样你就能启动你的调整大小功能。
另外,假设你的内容可能比视口大,你需要将overflow-y设置为滚动。
<!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也可以工作。 但是,IE7-在这种情况下,如果浮动为100%,则不能正确解释高度,所以标题需要放在内容中,如上所述。 overflow: auto在IE上会导致双倍的滚动条(IE的视口滚动条总是可见的,但被禁用),但如果没有它,内容会在溢出的情况下被剪切。