Höhe 100% funktioniert nicht für DIV-Tag in Internet Explorer 8

Ich habe den folgenden Code, den ich verwende, um ein Such-Tool mit einem Scroll-Ergebnisabschnitt anzuzeigen. Im IE funktioniert der Code in Ordnung:Höhe 100% funktioniert nicht für DIV-Tag in Internet Explorer 8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html style="background:black;height:100%;width:100%;"> 
    <head> 
     <title>Report</title> 
    </head> 
    <body style="background:black;"> 
     <table HEIGHT="100%" WIDTH="100%" style="background:red;"> 
     <tr> 
     <td> 
     Search Area 
     </td> 
     </tr> 
     <tr> 
     <td HEIGHT="100%" WIDTH="100%" style="background:orange;"> 
     <div style="overflow-y:scroll;height:100%;"> 
      <table style="width:100px;height:1000px;"> 
      <tr> 
      <td style="background:white;"> 
      Results Area 
      </td> 
      </tr> 
      </table> 
     </div>  
     </td> 
     </tr> 
     </table> 
    </body> 
    </html>

Aber wenn ich den Meta-Tag IE8 Formatierung zu verwenden, indem das Hinzufügen:

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

Die untere DIV-Tag über die Seite erweitert. Ich habe jedoch eine Reihe von Optionen ausprobiert und kann keinen Weg finden, ohne eine Höhe für die Werte anzugeben. Was nicht funktioniert, da die Seite 100% des Bildschirms einnehmen soll, unabhängig von der Größe des Browserfensters.

Jede Hilfe würde sehr geschätzt werden.

Quelle

2009-10-07 Anonymous

Sie sollten alle Ränder und Abstände für die Elternelemente auf Null setzen, um zu erhalten, was Sie wollen.

Update: Sorry, habe das Problem nicht sofort verstanden. Bens Hinweis sollte der bessere sein, den ich vermute. :)

Update 2: Hoppla, da Ben seine Antwort gelöscht hat macht mein erstes Update keinen Sinn. Versuchen Sie, die Körpergröße auf 100% zu setzen, das sollte das Problem lösen.

Quelle

2009-10-07 18:19:23 arno

Mein Verständnis über Cross-Browser-CSS ist nicht so groß, also ist es vielleicht nicht die beste Lösung, aber es ist eine Lösung.

So weit wie ich gesehen habe, müssen Sie immer die Höhe/Breite des Containers, den Sie überlaufen wollen, einstellen, also müssen Sie sie einstellen.

Um mit der Auflösung umzugehen, würde ich vorschlagen, dass Sie ein jQuery-Skript bei dem Ereignis onReady hinzufügen, das dynamisch die Höhe und die Breite festlegt, die den Überlauf arbeiten lassen.

Quelle

2009-10-07 18:19:50 tucaz

Ich hatte das ähnliche Problem wie Sie und schließlich war die Lösung, einen CSS-Zeileneintrag zu ändern, der einen !important Modifikator für eine feste Höhe Deklaration hatte. Im HTML-Code hatte die Klasse (in CSS definiert) die height zugewiesen 100%, aber die CSS angewendet !important während des Ladens.

Quelle

2009-12-16 16:22:12 ocell

Dieser Metatag ermöglicht korrektes CSS-Rendering und in CSS - von Entwurf - height:100%basically doesn't work.

Sie benötigen bestimmte Höhe zu jeden einzelnen Vorfahren des Elements zu geben, einschließlich <body>, <table>, <tr> und sogar <tbody> Element, das automatisch durch den Parser eingefügt wird.

Wie dem auch sei, kann dieses Layout in einfacher Weise erreicht werden:

.topBanner { 
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%; 
} 
body {padding-top: 2em}

dies schön in IE6 degradieren, und im Gegensatz zu overflow, wird richtig in Mobile Safari arbeiten.

Quelle

2009-12-20 23:52:41 Kornel

Edit:

die DOCTYPE-Deklaration Das Entfernen height = "100%" Arbeit machen, aber es macht den Browser im Quirks-Modus aber, was nicht erwünscht ist.

Im Allgemeinen wird die Verwendung von Tabellen für das Layout nicht empfohlen, Sie sollten stattdessen CSS verwenden.

Zum Beispiel: http://jsfiddle.net/rf649/7/

HTML

<div id="search">Search Area</div> 
<div id="results">Results Area</div>

CSS:

#search { 
    background-color: red; 
    position: fixed; 
    height: 150px; 
    width: 100%; 
} 
#results{ 
    background-color: orange; 
    position: fixed; 
    top: 150px; 
    width: 100%; 
    bottom: 0; 
    overflow: auto; 
}

Quelle

2010-01-03 19:36:40

den Doctype entfernen können Ihre Seite in Quirksmode schieben, die höchstwahrscheinlich mehr Probleme verursachen als es behebt. – Joel

@JoelPotter - Ich stimme zu, Sie haben Recht, ich habe die Antwort aktualisiert –

Dieses CSS hat auch seine Probleme in Bezug auf Cross-Browser-Kompatibilität (obwohl wahrscheinlich nicht so schlimm wie das Entfernen des DOCTYPE), da IE6 nicht richtig behandelt Position: fixiert. –

Höhe 100% funktioniert nicht für DIV-Tag in Internet Explorer 8

Antwort

Verwandte Themen