html - 如何让占满的高度

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>