html - 将 DIV 调整为表格中的最大高度

Question

我有这样的代码:

<td width="10">
<div style="border-left: 1px dashed #cccccc;width:10px;height:100%;"></div>
</td>

我还有另外两列元素，它们的高度可能很大我想将 div 动态设置为最大列中的最大高度。高度:100% 不起作用。如何做到这一点？

Answer 1

我无法使用纯 html/css 来完成。但我已经让它与几行 javascript 代码 一起工作:

window.onload = function() {
    var h  = document.getElementById('maintable').offsetHeight;
    var el = document.getElementById('resizeme');
    el.style.height = h+'px';
}

html:

<table id="maintable">
    <tr>
        <td></td>
        <td><div id="resizeme"></div></td>
        <td>one<br/>two<br/>three<br/>four<br/>five<br/></td>
    </tr>
</table>

CSS:

#resizeme {border: 1px solid blue;}
table {border-collapse: collapse;}
table tr td {vertical-align: top; border: 1px solid; padding: 5px;}

基本上，一切都取决于您的最终目标是什么。也许你可以只使用 html/css 来解决你的问题......另外，尽量不要在您的 html 代码中使用 css 样式...