3

私たちのアプリケーションは、レイアウトと配置にテーブルを多用しており、これまではIE（クァークズモード）のみでした。今後は、クァークズモードから抜け出し、テーブルをdivとよりセマンティックなレイアウトに置き換えようとしています。

私たちを止めているのはheight=100%、テーブルの行に設定し、その行に残りの垂直方向のスペースを占めるようにするクァークズモードの「機能」です。これまでのところ、テーブルの有無にかかわらず、クァークズモードの外でこれを行う方法を見つけることができませんでした。

これは、ページの本文で使用しているコードです。ここにはスタイリングは表示されていませんが、効果は同じです。

<table width="100%" height="100%" border="0">
    <tr>
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <th>This is my header bar</th>
                </tr>
            </table>
        </td>
    </tr>
    <tr height="100%">
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <td>This is my main section bar</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table width="100%" height="100%" border="1">
                <tr>
                    <td>This is my footer bar</th>
                </tr>
            </table>
        </td>
    </tr>

これは、Quirksモードでの外観です。中央の行（とheight="100%"）は、残りの垂直方向のスペースを占めるように拡張されていることに注意してください。

クァークズモードレンダリング

標準モードでは、次のような同じコードがレンダリングされます。

標準モード

jsFiddleとコード：http ： //jsfiddle.net/RBeWN/3/（iFrameなどの理由により、コードはjsFiddleでは実際にはクァークズモードでレンダリングされませんが、開発ツールを使用して強制することができます）。

sといくつかのcssでこれを実行しようとしましdivたが、機能しません：http: //jsfiddle.net/BVMhR/3/。メインdivを設定して、残りのスペースを取るのではなく、親と同じ高さにしheight: 100%;ます。設定box-sizing: border-box;もこれに違いはありません。

誰かが私がこの問題の解決策を見つけるのを手伝ってもらえますか？可能な限りjavascriptなしで実行できるようにしたいのですが、Javascriptが必要な場合は、すべてのページで実行できる汎用ソリューションである必要があります。これにより、設定のための開発オーバーヘッドがあまり発生しなくなります。上。

4

4 に答える 4

2

これは純粋なCSSでは解決できないと思います。

http://jsfiddle.net/AZcZx/10/

これは私がjavascriptでそれを行う方法です...私はdivの名前に基づいて、これがあなたのページがヘッダー、コンテンツ、フッターを処理する方法であると仮定しているので、これは十分に一般的であるはずです。

そこにエッジケースがあることを示すために境界線/マージンを追加しました。これはjQueryがうまく役立ちます...また、クァークズモードの例のコンテンツの垂直方向の中央揃えは問題の一部ではないと思います。

編集：

私は正直に立っています。これはCSSで行うことができますが、修正するのは簡単ではなかった幅の問題が発生するため、次のように修正します。

http://jsfiddle.net/AZcZx/27/

于 2012-08-23T21:14:57.970 に答える
2

かなりの数の異なるレイアウトを試して、要件に関するいくつかの詳細を明確にした後、純粋なCSSでこれを行う方法を見つけました。

これには、一番上の行と一番下の行の両方の高さを知ることが含まれます（ただし、％で指定できます）。また、divのいくつかの追加レイヤーも含まれます。

私の例はこのjsFiddleにあります。ウィンドウを拡大/縮小すると、中央の行のサイズが適切に変更されることに注意してください。必要に応じて、これをスクロールdivにすることもできます（を使用してoverflow: auto）。これにより、コンテンツが長すぎる場合にスクロールされます。

必要に応じて、このレイアウトに関する追加の質問があれば、遠慮なく私に連絡してください。

于 2012-08-24T12:48:39.477 に答える
1

ヘッダーとフッターの高さを知っていますか？divを使用したフィドルの例を見ると、どちらも高さが固定されています。その場合は、それらを絶対に上下に配置し、＃divMainの上下にマージンを追加することができます。

また、htmlとbodyをに設定しheight: 100%;、＃divMainをに設定する必要がありますmin-height: 100%;

于 2012-08-23T20:05:27.660 に答える
0

これを機能させるには、本文とHTMLを100％に拡張する必要があります。「height：100％」は、アイテムをその親の100％にします。親のサイズが定義されていない場合、そのサイズは子と同じだけになります。

body, html {height:100%}
于 2012-08-23T19:54:45.527 に答える