我沿着桌子的一排布置了三个“面板”。一个比另外两个高，我希望所有三个面板都与最高的一个的高度相匹配。我尝试将 div 的样式设置为 height: 100%，但是即使包含的 tds 增长，短面板仍然很短。
我的 HTML 是由 JSF 生成的，因此我对其表单的控制有限，但我可以修改样式。我制作了下面生成的代码的简化版本。 IE8和Firefox上也会出现同样的问题。然而，IE8 渲染的短面板与 td 顶部垂直对齐，而 Firefox 则渲染在中间。
<html>
<head>
<title>Test Table</title>
<style TYPE="text/css">
td {border: 1px solid red; padding: 1px;}
.panel {border: 1px solid blue; padding: 1px;height:100%}
.panel-header{background-color: green; color: white;}
.panel-body {border: 1px solid green; padding: 1px; height:100%;}
</style>
</head>
<body>
<h1>Test Table</h1>
<table width="100%">
<tbody>
<tr>
<td>
<div class="panel" style="height:200px;">
<div class="panel-header">
Header One
</div>
<div class="panel-body">
Body One
</div>
</div>
</td>
<td>
<div class="panel" style="height:100%;">
<div class="panel-header">
Header Two
</div>
<div class="panel-body">
Body Two
</div>
</div>
</td>
<td>
<div class="panel">
<div class="panel-header">
Header Three
</div>
<div class="panel-body">
Body Three
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
<html>
我认为如果没有明确说明 tds（或表格）的高度，您就不能将高度设置为 100%。看来您必须先在父元素上指定显式高度height:100%将生效。也许您可以将样式修改为 td 标签本身而不是 div 容器？
如果能够将 div 对齐到顶部而不是中间有帮助，我做了一个例子here http://jsfiddle.net/Drackir/TvbHv/如何做到这一点（添加vertical-align:top;到 td 标签）。我也做了一个只使用 div 的例子，尽管我知道你说过你对其形式的控制有限。
如果您知道一个元素的最大高度，请将表格或表格单元格设置为该高度（即height:200px;) 应该使 100% 对 div 生效。
Edit如果您不反对使用 jQuery，我已经更新了我的示例here http://jsfiddle.net/Drackir/TvbHv/1/做你需要做的事。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
