Wie legen Sie die Höhe von Zellen in einer Tabelle fest, die erweitert wird, um das Fenster in IE zu füllen?

Ich versuche, ein einfaches, einspaltiges Layout zu erstellen. Ich möchte, dass die oberen zwei Reihen kleinere, feste Höhen haben. Die dritte Zeile sollte erweitert werden, um den Rest der Seite zu füllen. Hier ist meine aktuelle Quelle:Wie legen Sie die Höhe von Zellen in einer Tabelle fest, die erweitert wird, um das Fenster in IE zu füllen?

<!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>

Das funktioniert wunderbar in Safari, Firefox und Opera. In IE6 und IE7 schlägt es jedoch nicht gut. In diesen beiden Browsern werden die ersten beiden Zeilen viel größer gerendert als ihre angegebenen Höhen. Nicht nur das, aber sie ändern sich tatsächlich dynamisch mit der Höhe des Browserfensters. Es ist, als würde IE die konstante Pixelhöhe in eine prozentuale Höhe umwandeln.

Es ist mir wichtig, dass das Browserfenster keine Bildlaufleisten anzeigt, es sei denn, der Inhalt der dritten Zeile ist groß genug, um es zu benötigen. Wenn Sie die Höhe des 3. <td> auf 100% einstellen, werden diese Bildlaufleisten immer angezeigt, da die Höhe dieser Zeile tatsächlich der Höhe der gesamten Tabelle entspricht (sie entspricht 100% des enthaltenen Elements).

Das Entfernen der Doctype-Deklaration und das Zurückkehren zum Quirks-Modus scheint das Problem im IE verschwinden zu lassen, aber ich muss HTML 4.01 als Übergang verwenden, was alle anderen vorhandenen Seiten in dieser Anwendung erwarten.

Quelle

2009-04-08 Sebastian Celis

Aus Neugier, was sind Ihre Gründe für eine 100% -Höhe Layout? –

Here is an article für Sie, die Ihnen sagt, wie dies getan werden kann. Ich habe gerade das Beispiel getestet, das sie in IE 6 bereitgestellt haben und es funktioniert.

Es scheint, dass Sie die Eigenschaft height der Tabelle verwenden müssen, und zwar NICHT über ein style-Attribut.

Quelle

2009-04-08 17:25:02

Das ist ein etwas anderes Layout als meins. Ich bin in der Lage, den gesamten Tisch gut zu erweitern. Aber wenn ich der Tabelle Zeilen hinzufüge und versuche, nur die letzte Zeile zum Erweitern zu bekommen, habe ich Probleme. –

Wie wäre es, Position hinzuzufügen: am Tisch fixiert? Ich habe es in IE8 getestet und schien zu arbeiten.

Quelle

2009-04-08 17:25:57

Das scheint in IE7 keinen Unterschied zu machen. –

Wenn Sie dies verwenden, um eine Seite zu gestalten, warum nicht stattdessen div verwenden?

Diese Art der Arbeiten:

<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>

Quelle

2009-04-08 18:26:58 wheresrhys

Stellen Sie die Höhe Ihres letzten td-100%:

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

Quelle

2009-04-22 01:43:42 knut

Das funktioniert nicht. Wenn Sie für eine Zelle eine Höhe von 100% festlegen, hat diese Zelle dieselbe Höhe wie die Tabelle, in der sie definiert ist. Da die Tabelle selbst zu 100% aus dem Körper besteht, ist die td ebenfalls 100% des Körpers, wodurch das Fenster zum Scrollen veranlasst wird. –

Denken Sie darüber nach. Was passiert, wenn die letzte Zelle die gleiche Höhe wie die Tabelle hat? Wie würde die Tabelle dann die ersten zwei Zellen anzeigen? Für sie wäre kein Platz. Hast du meine Lösung versucht? Es klappt. – knut

Ja, ich habe Ihre Lösung versucht. Tatsächlich stellt meine Frage ausdrücklich fest, dass diese Lösung in IE6 oder IE7 nicht funktioniert. –

funktionierts :?

<!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>

Quelle

2009-12-25 23:51:32

Wie legen Sie die Höhe von Zellen in einer Tabelle fest, die erweitert wird, um das Fenster in IE zu füllen?

Antwort

Verwandte Themen