Question

我正在寻找一种方法将孩子div放在父div的底部。父div位于td内，动态高度取决于行的内容。我尝试了多次尝试，包括position: relative和position: absolute解决方案，但由于动态高度，它无效。有人有想法吗？

修改

我没有使用表格进行布局。该表用于显示从服务器动态加载的数据。我添加了一张图片，其中显示了divs应放置在td内的两个div。父{{1}}目前没有特定的风格。我不需要支持旧版本的IE。该网站主要用于最新版本的Firefox，Chrome和Safari。

layout http://img29.imageshack.us/img29/5271/e49.png

Answer 1

您应该能够使用绝对定位来定位子div。将父div设置为相对位置，然后将child设置为absolute和bottom：0;如果您希望父div也位于底部，则需要调整<td>元素的垂直对齐。

你的css就像 -

div#container{width:200px;height:200px;
  border:1px solid #666;
  position:relative;
}

div#bottom{
  width:100px;height:100px;
  border:1px solid #f00;
position:absolute;bottom:0;
}

这是一个示例jsfiddle - http://jsfiddle.net/LRy6h/

和父div也在底部的那个 - http://jsfiddle.net/LRy6h/1/

和一个可调整大小（动态）高度 - http://jsfiddle.net/LRy6h/2/

另一个与您的更新图片相匹配的图片 - http://jsfiddle.net/LRy6h/3/

Answer 2

我找到了解决问题的另一种方法。我将相应height的{{1}}以及tr和父height的{{1}}设置为100％。这是一段代码：

td

Answer 3

很抱歉，但我必须写一个答案，而不是添加评论（声誉不够）。

听起来好像你正在使用表格进行布局 - 这不是个好主意！ ;-)
此外，如果您发布相关的HTML和CSS代码，或者甚至更好地设置jsFiddle，将会很有帮助。

你如何设计父DIV的风格？
没有跨浏览器方式将其设置为TD的高度（仅使用CSS）。＆＃34;现代＆＃34;方式可能是使用＆＃39; flexbox＆＃39;。但这取决于您必须支持的浏览器（和版本）以及您希望实现的布局。

使用＆＃39; position：relative＆＃39; on table elements也不起作用，因为这个行为是'undefined＆＃39;。

所以要真正给你一些好的建议，有一些信息缺失。

在表格单元格内的父div底部的子div

3 个答案: