如何让div匹配包含td的高度？ [英] How to make div match the height of the containing td?
问题描述
我的HTML由JSF生成，所以我对其形式的控制有限，但我可以修改样式。我在下面简化了生成的代码。在IE8和Firefox上也会出现同样的问题。但是，IE8将短面板垂直对齐到td的顶部，而Firefox将它们呈现在中间。
< HTML>
< head>
< title>测试表< / title>
< style TYPE =text / css>
td {border：1px纯红色; padding：1px;}
.panel {border：1px solid blue; padding：1px; height：100％}
.panel-header {background-color：green;颜色：白色;}
.panel-body {border：1px纯绿色; padding：1px;身高：100％;}
< / style>
< / head>
< body>
< h1>测试表< / h1>
< table width =100％>
< tbody>
< tr>
< td>
< div class =panelstyle =height：200px;>
< div class =panel-header>
标题一
< / div>
< div class =panel-body>
Body One
< / div>
< / div>
< / td>
< td>
< div class =panelstyle =height：100％;>
< div class =panel-header>
标题二
< / div>
< div class =panel-body>
Body Two
< / div>
< / div>
< / td>
< td>
< div class =panel>
< div class =panel-header>
标题三
< / div>
< div class =panel-body>
Body Three
< / div>
< / div>
< / td>
< / tr>
< / tbody>
< / table>
< / body>
< html>
我不认为您可以设置高度到100％，而没有明确说明tds（或表格）的高度。看起来你必须在 height：100％生效之前在父元素上指定一个明确的高度。也许你可以修改你的样式在td标签本身，而不是div容器？
如果它有助于将div对齐到顶部而不是中间，我做了一个例子这里介绍了如何做到这一点（添加 vertical-align ：top; 到td标签）。我做了一个只使用div的例子，虽然我知道你说过你对表单的控制有限。
如果你知道一个元素的最大高度，设置表格或表格单元格到该高度（例如 height：200px; ）应使100％在div上生效。
编辑如果你不反对使用jQuery，我已经更新了我的示例这里做你需要的。
I have three "panels" laid out along the row of a table. One is taller than the other two and I want all three panels to match the height of the tallest one. I tried styling the divs with height: 100%, but the the short panels stay short, even as the containing tds grow.
My HTML is generated by JSF, so I have limited control over its form, but I can modify the styles. I made a simplified version of the generated code below. The same problem occurs on IE8 and Firefox. However, IE8 renders the short panels vertically aligned to the top of the td, while Firefox renders them in the middle.
<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>
I don't think that you can set the height to 100% without explicitly stating a height for the tds (or the table). It seems that you have to specify an explicit height on a parent element before height:100% will take effect. Perhaps you can modify your styles to be on the td tags themselves instead of the div containers?
If it helps being able to align the divs to the top instead of the middle, I made an example here of how to do it (add vertical-align:top; to the td tags). I did an example using only divs too, though I know you said you have limited control over its form.
If you know the maximum height of one element, setting the table or table cells to that height (ie. height:200px;) should make the 100% be taken into effect on the divs.
Edit If you're not adverse to using jQuery, I have updated my example here to do what you require.
这篇关于如何让div匹配包含td的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
