Question

如下所示给出HTML，如何让最后一行占据剩余高度，并让n-1第一行占据他们需要的高度？

这似乎在Chrome中有效，但在Firefox2或IE6 / 7/8中没有。

<table>
  <tr>
    <td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
    <td/>
  </tr>
  <tr>
    <td>one</td>
  </tr>
  <tr>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
  </tr>
  <tr>
    <td>full</td>
  </tr>
</table>

所以，这个想法是最后一行，其中“full”应该非常高，其他行“one”，“two”和“three”应该尽可能小。

我尝试过把精确的高度放在行上，比如“＆lt; tr style =”height：20px;“＆gt;”我在最后一行尝试了100％的高度，到目前为止没有运气！ / p>

更新

此布局将用于不同类型的内容，目的是让表格自身调整内容大小。有时div会很高，然后它的高度决定了桌子的高度，但是div很短，然后行（一，二，三）决定了桌子的高度。

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<table border=1>
  <tr>
    <td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
    <td valign=top style="padding:0px;">
        <table height=1>
            <tr>
                <td>one</td>
          </tr>
          <tr>
                <td>two</td>
          </tr>
          <tr>
                <td>three</td>
          </tr>
          <tr>
    <td valign=top>full<br><br><br>more full</td>
  </tr>
        </table>
  </td>
  </tr>
</table>
</body></html>

更新x3，适用于ie6 / ff

Answer 2

如果javascript没问题，你可以使用jQuery找到最后一行的顶部位置以及窗口或元素底部的位置。差异应设置为最后一行的高度。

我还没有做任何代码，因为我不确定你是在寻找一个对象内部的表还是将它填充到窗口的底部。如果您想了解更多细节，我可以为您做到这一点。

IE css - 要扩展的最后一个表行以填充剩余高度

2 个答案: