Высота внутреннего элемента элемента TD

Question

У меня проблема с тем, что у меня есть элемент внутри TD-элемента, и когда я устанавливаю высоту элемента на 100%, он не заполняет всю TD-ячейку по высоте. Можно ли заполнить всю высоту TD во внутреннем элементе, если его содержимое не имеет такую ​​же высоту?

HTML

<table>
<tr>
    <td>
        <div>
            1<br/>
        </div>
    </td>
    <td>
        <div>
            2<br/><br/><br/>
        </div>
    </td>
</tr>
</table>

CSS

table {
 width: 200px;
 position: relative; 
 }
 table tr td {
 background-color: blue;
 width: 47%;
 position: relative;
 margin: 10px 1%;
 border: 1px solid #eee;
 }
 table tr td div {
 height: 100%;
 background-color: red;
 }

См., Например, следующий jsfiddle:

http://jsfiddle.net/7esUV/

Answer 1

да, это возможно, но ваш пример не работает, потому что вы устанавливаете height:100% в div внутри другого элемента (td) с неопределенной высотой

, поэтому просто установите высоту для элемента td или вычислите высоту ячейки с помощью js, а затем примените эту высоту к div

Answer 2

Это невозможно с css, так как высота ячейки таблицы зависит от ее содержимого. Div основывает свою высоту на высоте его родителя, в данном случае ячейку таблицы. Таким образом, если есть только одна строка, высота этой строки является высотой ячейки таблицы и, следовательно, элемента div внутри нее.

Пожалуйста, посмотрите здесь, почему div внутри ячейки таблицы - плохая идея: Является ли DIV внутри TD плохой идеей? .

Answer 3

Если вы не можете установить фиксированную высоту на td или tr (как вы упомянули в своем комментарии к одному из ответов), я боюсь, что единственный способ - Javascript:

http://jsfiddle.net/ptriek/xBjCE/

(в этом примере я использовал jQuery)

Answer 4

Вам нужно установить высоту tr, а затем высоту элемента в пикселях, чтобы соответствовать, см. Мой обновленный jsfiddle http://jsfiddle.net/peter/7esUV/3/