TD height = общая высота содержащихся divs?

Question

Не могу поверить, что я не могу найти этот вопрос здесь или в Google - кажется, такой глупый я смущен, чтобы спросить, но здесь идет, как это заставляет меня гайки этим утром ...

Imagine один столбец, линейчатая диаграмма сделаны с дивами, как это выглядеть немногих как термометр:

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

#thermo является содержащим DIV, #thermored это полный фон высоты и #thermogreen является наложением, что будет быть изменены, чтобы отражать данные - в реальном мире он показывает процент, полный задачи.

Как это стоит, он работает. Однако он должен работать внутри ячейки таблицы (не мой выбор - это системное ограничение на CMS). Проблема заключается в том, что высота содержащего TD (несмотря на попытки фиксированных высот) состоит из двух разделов, хотя они расположены относительно и накладываются друг на друга.

Вот текущий 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; 
} 

* EDIT Для получения информации вопроса я имею в Chrome и FF - IE (8) устанавливает высоту TD так, как я хочу

Answer 1

Я думаю, что проблема, с которой вы сталкиваетесь, связана с тем, что позиционирование листьев элементов в нормальном потоке позиционируется relative. Вы пробовали установить position: absolute; для внутреннего thermogreen div? Абсолютное позиционирование принимает элементы из нормального потока, и поэтому тег td учитывает только высоту вашего thermo div, который установлен на 500 пикселей в высоту. (Edit: вы можете оставить thermored без атрибута позиции. Он установлен на 100% от высоты div thermo, что означает, что ваш td будет иметь высоту 500 пикселей, а у вас меньше CSS, чтобы беспокоиться).

Посмотрите на jsfiddle я придумал: http://jsfiddle.net/dgRCu/3/

Решает ли это проблему? Кажется, td остался на высоте 500 пикселей вместо того, чтобы расшириться до 700+.

Я не уверен, какова цель этих разделов, поэтому я установил bottom: 0; на div thermogreen, так как кажется, что вы хотите, чтобы зеленая полоса расширялась по высоте, а красная полоса - цвет фона.

Answer 2

Клетки TD будут разрушаться/расширяться до размера самой высокой высоты. Использование css в ячейках приведет к возникновению различных проблем с разными браузерами или особенно с электронными программами.

Итак, вы пробовали:

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

И затем, положив эти блочные элементы там? Сделайте высоту в первой td ячейке вашего стола и сделайте ее больше, чем общая сумма двух div.

Вы плаваете один, поэтому наибольший должен заставлять высоту.

Answer 3

Вы использовали Dev Tools в IE, чтобы увидеть, как отображаются ячейки таблицы? Любой шанс вы можете сделать jsfiddle.net только таблицы html и кода css?