如何将div放在表格的底部

Question

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

我有一个100％宽的外表，没有高度属性。我在外表中有另一个表，我在使用div。我希望div内容放在内部表的底部。我目前将div放在<td>标记中。

我尝试使用position:absolute; bottom:0; left: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>

Answer 1

您需要将问题中的<td>元素设置为position: relative;。这样，任何绝对定位的元素都将相对于它定位。

Answer 2

哦，与桌子一起工作的乐趣。除非您将表的display属性设置为block

，否则这似乎无效

你可以尝试给这个风格的外部最里面（我的眼睛让我失望，对不起）：

position: relative;
display: block;

你还需要在position: absolute中添加回来（我看到你已经把它拿出去了，这实际上是用于此的正确方法）

#messageBox {
    position: absolute;
    bottom: 0;
}

请记住，将更改表的工作方式，并可能会破坏您的网站。请参阅：http://jsfiddle.net/5xTXU/

Answer 3

#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>

我将你的td高度从85px改为185px，以使其显而易见。

预览：

请求（不溢出）：

我正在使用其他包装器。

<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>

预览：