Question

考虑一个有三行高度为10，*，10的表。我希望中间单元格足够高以垂直适合页面。不幸的是，“高度：100％”在table，tr或td级别不起作用，可能是由于标准。即使它恰好工作，我也不想100％，我想100％的clientHeight-20px :)我总是可以编写脚本来计算剩余的clientHeight，但我想知道它是否可以在HTML / CSS标准中实现。

注意：我正在使用表格进行布局，如果还有其他方法以更好的方式将它们放下来我也可以使用这些方法。

Answer 1

尝试离开桌子并使用CSS。这是google上的第一个链接（搜索：css页面布局） http://www.maxdesign.com.au/presentation/page_layouts/

您将在开始时花费更多时间，但之后您会喜欢CSS。

此致洛伦佐。

Answer 2

我在Firefox和Safari中对以下内容进行了测试，虽然它可能不是最好的解决方案但它仍然有效！您将看到的是第1行和第3行的20高度仍然应用，100％构成其余部分。如果你从身体上留下填充物和边缘，你就会滚动。

<html>
<head>
<style>
html,body { height:100%; padding:0; margin:0; }
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="height:100%;">
  <tr height="20" style="background-color:grey;">
    <td>row 1</td>
  </tr>
  <tr>
    <td>row 2</td>
  </tr>
  <tr height="20" style="background-color:grey;">
    <td>row 3</td>
  </tr>
</table>
</body>
</html>

Answer 3

这不起作用吗？

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <!-- Date: 2009-07-13 -->
    <style type="text/css" media="screen">
        table {height: 100%; width: 100%;}
        td {border: 1px solid #000;}
    </style>    
</head>
<body>
<table>
    <tr height="10"><td>Data</td></tr>
    <tr height="100%"><td>Data</td></tr>
    <tr height="10"><td>Data</td></tr>
</table>
</body>
</html>

它适合我。

Answer 4

“height：100％”样式仅适用于具有显式设置的height属性的元素内的元素。在您的情况下，表可能在body标签内，而body标签没有设置高度。

Answer 5

这里有相同的 - 上面的简单示例有效，而我自己的页面没有“拉伸”所需的＆lt; tr＆gt;元件。

到目前为止我发现排除DOCTYPE（因此将浏览器置于怪癖渲染模式 - 即使对于FireFox！）使得我的页面表现得像简单的例子，但是在这些示例中添加DOCTYPE会阻止它们工作。 / p>

我想这还不是一个真正的答案，但它显示了进一步寻找合适解决方案的方向。希望有一种方法可以在没有怪癖模式的情况下实现这种“拉伸”行为。

编辑：This answer为我工作。桌子被包裹在绝对定位的全屏div中。我猜它的作用是浏览器首先计算div的尺寸，然后它知道如何调整表格（以及它内部的tr）的大小。与DOCTYPE一起使用，缓解，因为我不想使用怪癖渲染模式。

适合页面的高度

5 个答案: