Question

我想要一个包含3个部分的网页：页面顶部的页眉，页脚（两者都具有px中的特定高度）和页面的主要部分应该是div或table具有适当高度属性的单元格，以便获取它们之间的所有可用空间。我希望页面占据浏览器窗口高度的100％，试图避免使用滚动条。我遇到的问题如下：

使用DIV

a）如果我将maindiv高度设置为100％，页面溢出，我得到一个垂直滚动条。（maindiv的高度设置为浏览器窗口的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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html{
    height: 100%;
    max-height:100%;
    width: 100%;
    margin:0;
    padding:0;
}
div{padding:0;margin:0;}
#containerdiv{height:100%;width:100%;background-color:#FF9;border:0;}
#headerdiv{height:150px;width:100%;background-color:#0F0;border:0;}
#footerdiv{height:50px;width:100%;background-color:#00F;border:0; }
#maindiv{
    background-color:#F00;
    height:100%;
}
div{border:#000 medium solid;border:0;}
</style>
<body>
<div id="containerdiv">
<div id="headerdiv">headerdiv</div>
<div id="maindiv">maindiv</div>
<div id="footerdiv">footerdiv</div>
</div>
</body>
</html>

b）如果我将maindiv高度设置为auto，则maindiv高度取决于它的内容，这不是我想要的。

使用表格

a）如果我将主单元格高度设置为100％它可以正常使用Firefox但在Internet Explorer 8中我得到一个垂直滚动条（您可以使用下一个代码块使用th style =“height：100％” 而不是“自动”来看这个。）

b）如果我将主单元格设置为自动，它似乎在IE和FF中都有效，但我遇到的问题是我放入主单元格（table或div）中的任何内容都无法在IE中获得主单元格的全高。 / p>

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063"  cellpadding="0" cellspacing="0" border="0">
<tr><th style="height:150px;background-color:#FF0"></th></tr>
   <tr>
    <th style="height:auto"><table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:auto">nested cell</th></tr></table>
    </th>
  </tr>
  <tr><th style="height:50px;background-color:#FF0"></th></tr>
</table>
</body>
</html>

</html>

有什么想法吗？也许有一种更简单的方法来使用javascript在px中定义页面主要部分的大小？（我的javascript技能很差，所以欢迎任何帮助！）

Answer 1

您可以使用top和bottom属性定义#centerdiv，而不是使用百分比，例如：

#centerdiv {
    position:absolute;
    top: 160px; /*10px between header and this div at top*/
    bottom: 60px; /*10px between footer and this div at bottom*/
    width:100%;
    background-color:#FF9;
    border:0;
}

如何根据其他div或单元格的高度定义div或表格单元格高度

使用DIV

使用表格

1 个答案: