Как получить высоту div 100% внутри td 100%

Этот вопрос, по-видимому, был задан по меньшей мере 10 раз здесь, в stackoverflow, но ни один из них на самом деле не ответил. Это немного отличается тем, что проблема появляется в Firefox.

У меня высота table 100%, высота tr 100%. Я установил границу td на то, что я вижу. Я вижу, что td на 100%, как ожидалось. Я положил div в td и установил его на высоту 100%. Это 100% в Chrome. Это НЕ 100% в Firefox.

Как это исправить?

Пример

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.full {
    width: 100%;
    height: 100%;
    border: 10px solid red;
}
#content {
    width: 100%;
    height: 100%;
}

#content>table {
    width: 100%;
    height: 100%;
}
#content>table>tbody>tr>td {
    border: 10px solid blue;
    width: 50%;
}
#container {
    width: 100%;
    height: 100%;
    border: 10px solid black;
}
</style>
</head>
<body>
<div id="content">
  <table>
    <tr>
      <td>
        <div id="container">
          <div class="full">
            foo
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

Здесь фрагмент

    body, html {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .full {
        width: 100%;
        height: 100%;
        border: 10px solid red;
    }
    #content {
        width: 100%;
        height: 100%;
    }

    #content>table {
        width: 100%;
        height: 100%;
    }
    #content>table>tbody>tr>td {
        border: 10px solid blue;
    }
    #container {
        width: 100%;
        height: 100%;
        border: 10px solid black;
    }

    <div id="content">
      <table>
        <tr>
          <td>
            <div id="container">
              <div class="full">
                foo
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>

Ответ 1

Вам нужно также установить высоту td на 100%:

<td style="height: 100%">

jsFiddle

Ответ 2

Я думаю, потому что firefox нуждается во всех элементах, чтобы иметь 100% -ную высоту в css, включая ваш TD.

#content>table>tbody>tr>td {
    border: 10px solid blue;
    width: 50%;
    height: 100%;
}

Получил это с помощью firefox с этим.