IEでウィンドウを埋めるように展開するテーブルのセルの高さを設定するにはどうすればよいですか？

私は単純な1列のレイアウトを作成しようとしています。私は上の2つの行がより小さい、固定された高さを持つことを望む。 3行目は、ページの残りの部分を埋めるように展開されます。私の現在のソースは以下の通りです：IEでウィンドウを埋めるように展開するテーブルのセルの高さを設定するにはどうすればよいですか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     html, body 
     { 
      height:100%; 
      width:100%; 
      border:0px; 
      margin:0px; 
     } 
    </style> 
</head> 
<body> 
    <table style="width:100%;height:100%;" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="height:50px;background:red;">Header 1</td> 
    </tr> 
    <tr> 
     <td style="height:10px;background:blue;">Header 2</td> 
    </tr> 
    <tr> 
     <td style="background:green;">Content</td> 
    </tr> 
    </table> 
</body> 
</html>

これはSafari、Firefox、Operaですばらしいです。しかし、それはIE6とIE7の両方で悲惨な失敗です。これらの2つのブラウザでは、最初の2つの行が指定された高さよりもはるかに大きくレンダリングされます。それだけでなく、実際にはブラウザウィンドウの高さで動的にサイズが変更されます。 IEのように一定のピクセルの高さをパーセンテージの高さに変換するのと同じです。

3番目の行の内容が十分でなければ、ブラウザウィンドウにはスクロールバーが表示されません。第3の<td>の高さを100％に設定すると、実際にその行の高さがテーブル全体の高さに等しく設定されるため、スクロールバーが常に表示されます（その要素を含む要素の100％になります）。

doctype宣言を削除してquirksモードに戻すと、IEで問題が解決するようですが、このアプリケーションの既存の他のすべてのページに期待されるように、HTML 4.01の移行を使用する必要があります。

出典

2009-04-08 Sebastian Celis

100％高さのレイアウトが必要な理由は何ですか？ –

Here is an articleこれはどのように行うことができるかを教えてくれます。私はちょうど彼らがIE 6で提供した例をテストし、それは動作します。

テーブルのheightプロパティを使用し、スタイル属性では使用しないように見えます。

出典

2009-04-08 17:25:02

これは私のレイアウトとは少し違っています。テーブル全体をきれいに広げることができます。しかし、テーブルに行を追加して、最後の行を展開しようとすると、問題が発生します。 –

位置を追加するのはいかがですか：テーブルに固定しますか？私はIE8でそれをテストし、動作するように見えました。

出典

2009-04-08 17:25:57

これはIE7には何の違いもないようです。 –

代わりにdivを使用してページをレイアウトする場合はどうしたらいいですか？

作品のこの種：

<style> 
    .outer { 
     position:relative; 
     height: 100%; 
     width: 500px; 
     background-color: blue; 
    } 
    .top { 
     height: 30px; 
     background-color: red; 
     width: 100% 
    } 
    .middle { 
     height:30px; 
     background-color: green; 
     width: 100% 
    } 
</style> 
<div class="outer"> 
    <div class="top"> 
     content1 
    </div> 
    <div class="middle"> 
     content2 
    </div> 
    content3 
</div>

出典

2009-04-08 18:26:58 wheresrhys

あなたの最後のtd100%までの高さに設定します。

<tr> 
     <td style="background:green;height:100%;">Content</td> 
    </tr>

出典

2009-04-22 01:43:42 knut

それは動作しません。高さが100％になるようにtdを設定すると、そのセルは定義されているテーブルと同じ高さになります。したがって、テーブル自体はボディの100％なので、tdもボディの100％になり、ウィンドウがスクロールします。 –

それについて考えてみてください。最後のセルがテーブルと同じ高さになるとどうなりますか？どのようにして表は最初の2つのセルを表示しますか？彼らのための余地はないでしょう。私の解決策を試しましたか？できます。 – knut

はい、私はあなたの解決策を試しました。実際には、私の質問は、このソリューションはIE6またはIE7で動作しないことを明示的に述べています。 –

は、この作業を行い:?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <style type="text/css"> 
     html, body 
     { 
      height:100%; 
      width:100%; 
      border:0px; 
      margin:0px; 
     } 
    </style> 
</head> 
<body> 
    <table width="100%" height="100%" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td height="50" style="background:red;">Header 1</td> 
    </tr> 
    <tr> 
     <td height="10" style="background:blue;">Header 2</td> 
    </tr> 
    <tr> 
     <td style="background:green;">Content</td> 
    </tr> 
    </table> 
</body> 
</html>

出典

2009-12-25 23:51:32

IEでウィンドウを埋めるように展開するテーブルのセルの高さを設定するにはどうすればよいですか？

答えて

関連する問題