如何使div匹配包含td的高度？
如何使div匹配包含td的高度？
提问于 2011-02-08 04:09:18
我有三个“面板”沿着桌子的一行布置。其中一个比另外两个高，我希望所有三个面板都与最高的一个的高度相匹配。我试着用高度设置div的样式: 100%，但短面板仍然很短，即使包含的tds不断增长。
我的HTML是由JSF生成的，所以我对它的表单有有限的控制，但是我可以修改样式。我对下面生成的代码做了一个简化版本。同样的问题也发生在IE8和火狐上。然而，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>回答 3
Stack Overflow用户
回答已采纳
发布于 2011-02-08 04:39:40
我不认为在没有明确说明tds (或表格)高度的情况下，您可以将高度设置为100%。在height:100%生效之前，您似乎必须在父元素上指定一个显式高度。也许您可以修改您的样式，使其位于td标记本身，而不是div容器上？
如果这有助于将div对齐到顶部而不是中间，我做了一个示例here来说明如何做到这一点(将vertical-align:top;添加到td标记)。我也只用did做了一个例子，尽管我知道你说过你对它的形式有有限的控制。
如果您知道一个元素的最大高度，请将表格或表单元格设置为该高度(即，height:200px;)应该使100%在div上生效。
编辑如果您不反对使用jQuery，我已经更新了我的示例here以满足您的要求。
Stack Overflow用户
发布于 2011-02-08 04:15:49
height=100%;
or
height=inherit;其中之一应该可以解决这个问题:)
Stack Overflow用户
发布于 2011-02-08 04:28:28
我的解决方案：http://jsfiddle.net/k6Dam/2/
删除内联样式(希望你可以这样做)，并将面板主体的最小高度设置为200px。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4925995
复制相关文章
相似问题
腾讯云开发者
