2

このサンプルコードは、IE 10では期待どおりに機能しません（内部テーブルは残りのスペースを取得しません）。質問を強調するために、.cssやその他の要素を削除します。

内側のテーブルを使用して、上部の50pxの線と下部の30pxの線の間のすべてのスペースを取得したいと思います。別のDoctypeでは機能しますが、プロジェクトではこのDoctypeを使用する必要があります。

<!DOCTYPE html>

<html style="height: 100%">
<body style="height: 100%">
    <table style="height: 100%">
        <tr style="height: 50px">
            <td>
                &nbsp;
            </td>
        </tr>
    <tr>
            <td>
                <table style="height: 100%; background: #f00">
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    <tr style="height: 30px">
            <td>
                &nbsp;
            </td>
        </tr>
    </table>
</body>
</html>
4

1 に答える 1

1

実際、これはIE9でも機能しません。これはバグではなく、IE のレンダリング エンジンの予期される動作です。を無視するため、内側のテーブルは引き伸ばされませんheight:100%。これは、DOM 要素が特定heightの単位で指定された CSS プロパティを持つ直接の親を持つ必要があるためです (height: autoはカウントされません)。TD（ inner の親）に高さを指定するTABLEと、機能します。height: 100%-50px-30pxしかし、 for を指定することはできないためTD、このマークアップは実現したいレイアウトには適していません。

あなたのレイアウトは、ヘッダーとフッターの高さが固定され、本体が自動的に引き伸ばされる古典的なヘッダー-本体-フッターです。これは Web で非常に人気のあるレイアウトです。クロスブラウザー (IE、Chrome、Firefox、Safari) で動作させる方法はたくさんあります。クロスブラウザ（IE7を含む）で動作させるための私のお気に入りのオプション：

  • ヘッダーとフッターには高さを明示的に指定し、本文には 3 つの DIV を使用しますposition:absolute; top:<header-height>; bottom:<foooter-height>。また、3 つの DIV すべてを 1 つの絶対配置コンテナーにラップする必要があります。
于 2012-12-25T08:34:35.290 に答える