Высота элемента внутреннего элемента 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

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

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

Answer 2

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

Answer 3

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

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

(я использовал JQuery в данном примере)

Answer 4

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

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