Question

我无法相信我在这里或谷歌上找不到这个问题 - 看起来这么愚蠢我觉得很尴尬，但是今天早上这让我疯了......

想象一下用这样的div制作的单列叠加条形图看起来有点像温度计：

<div id="thermo">
  <div id="thermored"></div>
  <div id="thermogreen"></div>
</div>

#thermo是包含div，＃thermored是全高背景，＃thermogreen是将被更改以反映数据的叠加层 - 在现实世界中它显示完成任务的百分比。

现在，它起作用了。但是，它需要在表格单元格内工作（不是我的选择 - 这是对CMS的系统限制）。问题是，包含TD的高度（尽管尝试固定高度）是两个div的总和，即使它们相对定位并重叠。

这是当前的css - 它并不漂亮，因为我在过去几个小时内尝试过如此多的定位组合

#thermo{
    width:140px;
    height:500px;
    position:relative;
}
#thermored{
    width:50px;
    height:100%;
    margin-left: 20px;
    background-color: red;
}
#thermogreen{
    width:50px;
    height:280px;
    margin-left: 20px;
    background-color: green;
    position:relative;
    bottom: 280px;
    float:left;
}

*编辑有关信息我遇到的问题是在Chrome和FF中 - IE（8）以他们想要的方式设置TD高度

Answer 1

我认为你遇到的问题来自relative定位在正常流程中留下元素的事实。您是否尝试为内部position: absolute; div设置thermogreen？绝对定位使元素超出正常流量，因此td标记仅考虑thermo div的高度，其高度设置为500px。（编辑：您实际上可以离开thermored没有位置属性。它设置为thermo div高度的100％，这意味着无论您的td高度为500px，你担心的CSS少了。）

看看我提出的jsfiddle： http://jsfiddle.net/dgRCu/3/

这会解决您的问题吗？似乎td保持在500像素高度，而不是现在扩展到700+。

我不确定这些div的目的是什么，所以我在bottom: 0; div上设置thermogreen因为看起来你想要的是绿色条在高处扩展而红色bar是背景颜色。

Answer 2

TD细胞将坍缩/扩展到“最高”高度的大小。在单元格中使用css将导致不同浏览器或特别是电子邮件阅读器的不同问题。

所以，你试过了：

<tr>
<td height="500"></td>
</tr>

然后，把那些块元素放在那里？在表格的第一个td单元格上设置高度，使其大于两个div的总和。

你是漂浮的，所以最大的应该是强迫身高。

Answer 3

您是否在IE中使用了Dev Tools来查看表格单元格的呈现方式？你有没有机会制作一个只有html表和css代码的jsfiddle.net？

TD高度=包含div的总高度？

3 个答案: