29

この質問は、ここstackoverflowで少なくとも10回は尋ねられたようですが、実際に答えがある人はいません。これは、問題が Firefox で発生するという点で少し異なります。

私はtable高さ100％、tr高さ100％です。の境界線をtd見えるものに設定します。td期待どおり 100%であることがわかります。その中に a を入れて、div高tdさ 100% に設定します。Chrome では 100% です。Firefox では 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. # = 100% である必要がある黒の div。r = 100% である必要がある赤い内側の div (明らかにどちらの場合も)。間違っているのは黒い方です。

この場合、Firefox を Chrome のように動作させるには、どの CSS を修正する必要がありますか?

PS: はい、テーブルが必要です。表形式のデータを表示しています。上記の例は、デバッグを簡単にするために単一のセルに簡略化されています。

4

3 に答える 3

28

td の高さも 100% に設定する必要があります。

<td style="height: 100%">

jsフィドル

于 2013-08-28T12:46:03.583 に答える
4

これは、Firefox が TD を含め、css ですべての要素の高さを 100% にする必要があるためだと思います。

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

これでFirefoxで動作するようになりました。

于 2013-08-28T12:45:34.953 に答える