如何使<div>占据整个高度

Question

我有以下代码：

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

<div id="content">
  <table>
    <tr>
      <td style="height: 100%">
        <div id="container">
          <div class="full">
            foo
          </div>
        </div>
      </td>
  </table>
</div>

我想要的是将第二个td的div垂直延伸到封闭的td的高度，以使两个单元的场集看起来同样高。我希望红色字段集看起来和蓝色字段集一样高。

适用于Chrome，而不适用于Firefox！？！？ 我不在乎边界在外面。边框只显示div（黑色）没有扩展到100％，即使cell / td（蓝色）是。

有办法吗？

Answer 1

两件事：

1。）添加'box-sizing：border-box;'作为一般规则（*选择器）（如果你想看到单元格四边的红色边框）

2。）将padding: 0添加到单元格中，以消除红色和蓝色边框之间的微小空白区域。

* {
  box-sizing: border-box;
}
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;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  border

<div id="content">
  <table>
    <tr>
      <td style="height: 100%">
        <div id="container">
          <div class="full">
            foo
          </div>
        </div>
      </td>
  </table>
</div>