3

ヘッダー付きの「フルスクリーン」ページを生成するコードを書いています。レイアウトを行うためにテーブルを使用しており、CSSで寸法とフォーマットを指定しています。

テーブルの高さと幅は100％で、ウィンドウ/ビューポートを埋めるようになっています。これは、最初は意図したとおりに機能します。テーブルには2つの行があり、それぞれに1つのセルがあります。最初の行のセルの高さは20pxですが、他の行のセルの高さは100％で、ウィンドウの残りのスペースを埋めることができます。一番下のセルの中にはiFrameがあり、セルを埋めるために100％x100％に設定されています。iFrameは意図したとおりに機能しますが、テーブルはその設定に従っていません。

特に私のターゲットブラウザであるIEでページがレンダリングされると、テーブルがビューポートの範囲外に引き伸ばされます。具体的には、テーブルのサイズに20pxが追加されています。テーブルを固定の高さに設定しても、設定しているサイズに20pxが追加されます。コードがテーブルを100％の高さに強制し、上部のセルが20pxになり、下部のセルがテーブルを引き伸ばすことなく、テーブルの高さの残りの使用可能なスペースを具体的に占めることを期待します。これはChromeで完全に機能しますが、CSSルールで厳密に100％の高さに設定されている場合でも、IEはテーブルの高さを100％+20pxにし続けます。

以下は私のコードの簡略版です：

    <table style=" height:100%; width: 100%;"><tr><td style="height: 20px;">
    {content header here}
    </td></tr><tr><td style="height: 100%;">
    {iframe with dimensions 100% x 100% here}
    </td></tr></table>

Chromeでの結果は完全に表示されます。IEでは、含まれているテーブルの高さが20ピクセルになりすぎてビューポートの外側に移動するため、iframeの下部の20ピクセルがビューポートの外側になります。

4

1 に答える 1

2

それは正常です。テーブルの行の1つは高さが「20px」で、もう1つは高さが「100％」です。

「height：100％」の代わりに「height：auto」を使用します。

これにより、最初の行の高さが20pxの場合、ブラウザは親要素から左側のページの高さのスペースを計算します。

また、「height：auto」を使用すると、テーブルに境界線があり、要素にパディングまたはマージンが設定されている場合に、潜在的な問題を回避できます。

于 2012-10-14T08:10:25.707 に答える