Fit <TD> height to page

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

注意：如果还有其他方法可以更好地布置它们，我只使用表格进行布局，我也可以使用这些方法。

来源

2009-07-13 Sedat Kapanoglu

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

你会花更多的时间在开始，但你会爱上CSS。

Regards， Lorenzo。

来源

2009-07-13 10:01:35

如果他使用表格数据呢？为什么认为他不是，并给他一个他没有找到的答案？ – jonwd7 2009-07-13 10:18:33

我不使用表格数据，只使用表格进行布局。我会先看看链接，谢谢！ – 2009-07-13 10:39:55

很高兴看到您已更新您的帖子，指出这一点。 :)在这种情况下，绝对不要使用表格进行布局。上面的链接是一个好的开始。 – jonwd7 2009-07-13 10:55:31

我已经在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>

来源

2009-07-13 10:02:18 Ian

我不认为这回答他的问题。他不希望中间一行填满页面吗？ – James 2009-07-13 10:05:37

这应该使中间行填满页面，因为表格具有100％的固定高度，并且顶部+底部各自固定20px。将剩下的高度留给中间一排。 – peirix 2009-07-13 10:08:58

我没有在我的例子中的'html，body'上设置任何东西，并且没有滚动。所以我不确定你到底在说什么。另外，他想每个10px，总共20px。 :) – jonwd7 2009-07-13 10:15:39

这不行吗？

<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>

它确实适合我。

来源

2009-07-13 10:03:33 jonwd7

是的，似乎工作，我试图理解为什么:) – 2009-07-13 10:49:48

“height：100％”样式只适用于明确设置了height属性的元素内部的元素。就你而言，表格可能位于车身标签内，车身标签没有设置高度。

来源

2009-07-13 10:04:13 Fenton

谢谢你解释行为背后的根源。我仍然在寻找解决方案。 – 2009-07-13 10:41:28

在这里有相同的 - 上面的简单例子工作，而我自己的页面并没有“拉伸”所需的元素。

我到目前为止发现的是，排除DOCTYPE（因此将浏览器变成怪异渲染模式 - 即使对于FireFox！）也会使我的页面像简单示例一样运行，但向这些示例添加DOCTYPE可以阻止它们工作。

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

编辑：This answer为我工作。表格被包装成绝对定位的全屏div。我猜这是因为浏览器首先计算div的尺寸，然后它知道表格（以及它内部的tr）的大小。与DOCTYPE一起使用，减轻，因为我不想使用怪癖渲染模式。

来源

2010-06-08 16:09:34 NPC

Fit <TD> height to page

回答

相关问题