Css 如何将div放置在表的底部

我不确定这里需要什么，但我想在嵌套表的底部放置一个div

我有一个100%宽的外桌，没有高度属性。在使用div的外部表中有另一个表。我希望div内容位于内部表的底部。我目前在

标记中有div

我尝试使用

position:absolute；底部：0；左：0

但它将div及其内容放在我屏幕的最底部

我该怎么做

顺便说一句：我知道我应该在这个项目上使用100%的css，但我正在逐步过渡

这是我的div代码

#messageBox {
width:95%;
height:35px;
margin:10px;
padding:10px;
font-family:Arial;
font-size:18px;
}

这是表格代码

<table cellpadding="0" cellspacing="0" border="0" style="width:60%;margin-left:auto;margin-right:auto;margin-top:30px;border:0px solid">
 <tr>
   <td colspan="2" style="height:85px;"><div id="messageBox">test</div></td>
 </tr>
</table>

测试

哦，使用桌子的乐趣。除非将表的

display

属性设置为

block

您可以尝试将最外层和最内层（对不起，我的眼睛看不见）的表格设置为以下样式：

position: relative;
display: block;

您还需要在

位置：absolute

（我看您已经去掉了它，这实际上是正确的方法）

---

请记住，这将改变表的工作方式，并可能破坏您的站点。请参阅：

您需要将相关的

元素设置为

位置：相对。这样，任何绝对定位的元素都将相对于它定位。
\messageBox{
#messageBox {
    width:95%; /* wrong calculation when you add with margin/padding makes overflow */
    height:35px;
    margin:10px;
    padding:10px;
    font-family:Arial;
    font-size:18px;
    border:1px solid red;
}

<table>
    <tr>
      <td colspan="2" style="height:185px; border:1px solid black; vertical-align:bottom;">
        <div id="messageBox">test</div>
      </td>
    </tr>
</table>

宽度：95%；/*使用边距/填充进行添加时计算错误会导致溢出*/
高度：35px；
利润率：10px；
填充：10px；
字体系列：Arial；
字号：18px；
边框：1px纯红；
}
测试

我把你的td的高度从85像素改为185像素，让它更明显

预览：


请求（不溢出）：

我正在使用额外的包装

<table>
    <tr>
      <td colspan="2" style="height:185px; border:1px solid green; vertical-align:bottom;">
        <div style="overflow:hidden; border:1px solid red;">
            <div style="border:1px solid black; float:left; width:100px; margin:10px; padding:0px;">Test</div>
        </div>
      </td>
    </tr>
</table>


试验

预览：

谢谢易建联，但那没用。我应该为div使用什么css代码？Yi，我试过了，唯一不同的是我的表缩小了一点，但所有元素仍然位于同一位置。谢谢Balis。我试过了，但没有什么不同。让我编辑我的帖子以包含我的css。你是否将
保留为
位置：绝对；底部：0？@Balus，我没有。我把它换回来了。我现在拥有的正是我在上面发布的东西。我想我应该等着有人告诉我该改变什么我认为我的答案中的“任何绝对定位的元素”都是自我解释的。我添加了
位置：相对到
标签，但没有任何更改。杰弗里，谢谢。我一直在玩这个，而等待有人来帮助我，我已经尝试了垂直对齐属性，实际上它的位置在底部的div。我也注意到我的div在td框之外。我希望这个部门的收入是100%。我该怎么办？好吧，我要走了。我之所以称赞你，是因为，尽管这仍然不起作用，但这是唯一的答案，它在某种程度上实现了我的愿望。谢谢。我已经更新了答案，尼克。也许它和前一个很不一样。
<table>
    <tr>
      <td colspan="2" style="height:185px; border:1px solid green; vertical-align:bottom;">
        <div style="overflow:hidden; border:1px solid red;">
            <div style="border:1px solid black; float:left; width:100px; margin:10px; padding:0px;">Test</div>
        </div>
      </td>
    </tr>
</table>