如何在td100%的情况下获得div高度100%?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (131)

这个问题似乎至少在堆叠溢出问题上被问过至少10次,但实际上没有一个问题给了我答案,因为问题出现在Firefox中。

有一个table高度100%tr高度100%。我设置了td的边界。我看到td和预期的一样是100%。我放了一个div在那td并将其设置为100%高。Chrome是100%。但在火狐中不是100%。

我该怎么解决这个问题?

<!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>

在Chrome中:

 bbbbbbbbbbb
 b#########b
 b#rrrrrrr#b
 b#r     r#b
 b#r     r#b
 b#r     r#b
 b#rrrrrrr#b
 b#########b
 bbbbbbbbbbb

而在Firefox中

 bbbbbbbbbbb
 b         b
 b#########b
 b#rrrrrrr#b
 b#r     r#b
 b#rrrrrrr#b
 b#########b
 b         b
 bbbbbbbbbbb

其中b=蓝色td#=黑色div,应该是100%。r=红色内部div,也应该是100%。是那个黑色的错。

在这种情况下,我需要修复哪些CSS才能让Firefox表现得像Chrome?

提问于
用户回答回答于

还需要将TD的高度设置为100%:

<td style="height: 100%">

用户回答回答于

火狐需要所有元素在CSS中有100%高,包括TD。

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

扫码关注云+社区