Html 给出表格单元格1像素高度的错误做法？

我正在创建一个表单，我正在使用表为其创建布局。所有表格单元格的内容都与顶部对齐。我在这里画了一幅美丽的图画：

|--------------|----|
|      1       |    |
|--------------|  3 |
|              |    |
|      2       |    |
|--------------|----|

单元格1和单元格2通常包含更多内容，因此它们通常决定整个表格的高度。尽管如此，有时单元格3的内容更多，以至于需要比1和2更高的高度，所以其他单元格会被拉伸。这意味着在单元格1的底部将有一个大的空白区域

所以，我希望单元格1的重量总是最小的，所以如果单元格3延伸出表格，多余的空间将放在单元格3的底部。为了实现这一点，我在css中将单元格1的高度设为1px。然后它将始终尝试具有1px的高度，这意味着它将始终具有尽可能低的高度

这种做法不好吗？它在所有浏览器中都可用吗？

---

编辑：单元格3有一个1px的左边框，我总是希望跟随页面直到底部。这就是我不使用div的原因。

很难从表中获得此形状，因为每个单元格中的变化将放大整个列 这是 相反，您可以尝试以下代码

<div id='column1'>
    <div class='cell1'>This is content 1</div>
    <div class='cell2'>This is content 2</div>
</div>
<div class='cell3'>This is content 3</div>

---

感谢穆罕默德的评论。我也更喜欢使用div，我个人会将面板3浮动到右侧，并对包含div1和div2的列应用“overflow:hidden”。虽然我使用表格的原因是因为在第3单元还有1px的边框。因为我不知道哪列的高度最大，所以它们必须一起调整大小。我会更新这篇文章。

body
{
    width:410px;
    color:#fff;

}
div#column1 {
    float:left;
width:200px;

}
div#column1 div.cell1,div#column1 div.cell2
{
    width:200px;
    height:200px;
    background:#333;
    display:block;
    margin-bottom:10px;
}
div.cell3
{
    float:right;
    display:block;
    height:400px;
    width:200px;
    background:#00b3ff;

}