Как установить вложенную высоту DIV так же, как контейнер?

Question

Пожалуйста, найти свой фрагмент кода, как показано ниже:

<table cellpadding="0" cellspacing="0" style="background-color:Aqua"> 
    <tr> 
     <td> 
      <div style="background-color:Yellow">Navigation</div> 
     </td> 
     <td> 
      Content<br />Content<br />Content<br />Content<br /> 
     </td> 
    </tr> 
</table> 

Как я могу сделать высоту <div> же, как рост содержания в <td>? Я попытался установить высоту = 100% или AUTO в <div> и <td>, но это не исправить проблему.

Я знаю, что это может быть исправление, чтобы получить высоту содержимого с помощью JQuery/JavaScript и установить на <div>, например:

$(".divClass").height($(".contentClass").height()); 

но мое содержание будет коллапс и раздолье на действия пользователя, так Я ищу лучшего решения. решение должно быть кросс-браузер, совместимый для IE 6, IE 10.

Answer 1

Вы можете сделать это непосредственно с HTML/CSS

<table cellpadding="0" cellspacing="0" style="background-color:Aqua"> 
    <tr> 
     <td> 
      <span style="height:100%; display:inline-block; width: 100%; background-color:Yellow"> 
       Navigation 
      </span> 
     </td> 
     <td> 
      Content<br />Content<br />Content<br />Content<br /> 
     </td> 
    </tr> 
</table> 

Answer 2

Попробуйте использовать height:inherit; :) работал для меня :)

JsFiddle.

HTML:

<div class="foo"> 
    <div class="foo2"> 
     Foo2 
    </div> 
</div> 

CSS:

.foo { 
    height: 100px; /*try changing this */ 
    background-color: yellow; /*it wont show*/ 
} 

.foo2 { 
    height: inherit; 
    background-color: green; /*it will show*/ 
}