How to make div match the height of the containing td?
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="p开发者_开发技巧anel" 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.
height=100%;
or
height=inherit;
One of these should do the trick :)
My solution: http://jsfiddle.net/k6Dam/2/
Remove inline-styles (hope you can do that) and set min-height of the panel-body to 200px.
加载中,请稍侯......
精彩评论