div height=100% nur im IE?

***Dr Dau*** · 29.04.05, 23:01

Hallo!

Wie der Titel schon sagt, versuche ich eine DIV-Box über die gesamte Fensterhöhe anzeigen zu lassen.
Da es ja aber verschiedene Monitorauflösungen gibt, kann es doch eigentlich nur mit height="100%" funktionieren?!
Der IE interpretiert die 100% auch als solche, Netscape/Mozilla und Opera aber nicht.
Wie schaffe ich es nun dass die DIV-Box auch in den anderen Browsern über die gesamte Höhe dargestellt wird? (so wie im Anhang dargestellt)

Noch ein paar Details:
Das Menü (blauer Streifen) hat eine feste Breite und variable Höhe.
Content (weisse Fläche) hat eine variable Breite und variable Höhe.

            
            
              
                
                  
                    HTML-Code:
                  
                

                  
                   	<body bgcolor="#ffffff" text="#000000" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<div style="height:100%;width:140px;padding-top:12px;padding-bottom:12px;background-color:#0086d7;">
	<center>
	 <table id="navtable" border="0" cellpadding="0" cellspacing="0">
	 <tr>
	 <td class="navigation">
		 <center><a href="#">Seite 1</a></center>
	 </td>
	 </tr>
	 <tr>
	 <td class="navigation">
		 <center><a href="#">Seite 2</a></center>
	 </td>
	 </tr>
	 <tr>
	 <td id="leer">
		 <center><a>&nbsp;</a></center>
	 </td>
	 </tr>
	 <tr>
	 <td class="navigation" style="border-top: 0px solid #90bade;">
		 <center><a href="#">Seite 3</a></center>
	 </td>
	 </tr>
	 </table>
	</center>
</div>
</body>
                  
                

              
            
          

Gruss Dr Dau

**Maik** · 30.04.05, 05:27

CSS-Code:

            
                    Code:
                  
                   	html, body
{
height: 100%;
margin: 0;
padding: 0;
}

div#nav
{
height: 100%;
width: 140px;
background: #0086d7;
float: left;
}

div#content
{
height: 100%;
background: #efefef;
width: auto;
}

HTML-Code:

            
            
              
                
                  
                    HTML-Code:
                  
                

                  
                   	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body, html
{
height: 100%;
margin: 0;
padding: 0;
}

div#nav
{
height: 100%;
width: 140px;
background: #0086d7;
float: left;
}

div#content
{
height: 100%;
background: #efefef;
width: auto;
}
-->
</style>

</head>
<body>

<div id="nav">navDIV</div>

<div id="content">contentDIV</div>

</body>
</html>
                  
                

              
            
          

Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23

***Dr Dau*** · 30.04.05, 09:37

Hallo!

Auf den ersten Blick sah es ja schon ganz gut aus.
Wenn jetzt aber im Content der Inhalt höher als das Browserfenter ist, dann muss ich ja scrollen.
Soweit ok. Nur setzt sich der blaue Streifen nicht weiter fort, dass heisst er endet irgendwo mitten drin.
Und wenn der Inhalt von Content breiter als das Browserfenster ist, schiebt sich der Inhalt unter den blauen Streifen.

So soll es aber nicht sein.
Der blaue Streifen soll das Menü sein.
Darum soll der Streifen auch von oben bis unten gehen, unabhängig davon wieviele "Buttons" ich habe, bzw. wie hoch oder breit der Inhalt von Content ist.

Gruss Dr Dau

***Dr Dau*** · 18.06.05, 17:35

Hallo!

Auch wenn ich wieder auf Tabellenlayout umgestiegen bin weil DIV-Boxen ja immer wieder Probleme machen, liess mir die ganze Sache dann doch keine Ruhe.

Im Anhang sind 2 Beispiele:
Beispiel 1 besteht aus 2 Spalten.
Beispiel 2 besteht aus 2 Spalten und einer Kopfzeile.

Beide Beispiele sind auf 1000px Gesamtbreite ausgelegt, lässt sich jedoch ändern.
(Menü 140px + Content 860px = gesamt 1000px)
(Kopfzeile 1000px)
Die Höhe beider Spalten passt sich dem Inhalt der linken und/oder rechten Spalte gemeinsam an und ist mindestens so hoch wie die Browserauflösung.
Die Kopfzeile in Beispiel 2 hat eine feste höhe.

Für die linke und rechte Spalte braucht ihr die gleiche Hintergrundgrafik, diese muss die breite vom Menü haben (im Anhang ist sie 140px breit).
Die grösse der Hintergrundgrafik für die Kopfzeile spielt keine Rolle.
Beide Grafiken können auch gemustert sein.

In [if IE] stehen Korrekturangaben für den IE ab 5.0 (also für 5.0, 5.5 und 6.0, ohne Mac-Version).
Für ältere Versionen sind die [if IE] Anweisungen nicht verfügbar da diese erst mit Version 5.0 eingeführt wurden.

Zitat:

Hierbei handelt es sich um spezielle HTML-Kommentare mit einer Bedingung, die der Internet Explorer ab der Version 5 auswertet und hiervon abhängig den im Kommentar enthaltenen HTML-Code ausführt oder nicht. Für alle anderen Browser handelt es sich lediglich um Kommentare, deren Inhalt ignoriert wird.

Getestet habe ich die Seite unter Win98 SE mit IE 5.0 und unter Win2000 SP4 mit IE 5.5, IE 6.0, Opera 7.54, Netzcape 7.1 und Mozilla 1.7.5.

Validierung:
HTML = This Page Is Valid HTML 4.01 Strict!
CSS = Keine Fehler oder Warnungen gefunden

Was mich (und andere sicherlich auch) jetzt noch interessiert:
1. wie verhält sich die Seite mit anderen Browsern und/oder Systemen?
2. ist es evtl. auch möglich die Seite XHTML 1.0 valide zu bekommen?

Da ich mich noch nie mit XHTML befasst habe, hatte ich auch keine Lust nur deswegen erst lange jeden sch**** nachzulesen.
Ihr kennt dass ja, man probiert irgendwas rum ohne zu wissen ob es überhaupt machbar ist.
Ich will kein angepassten Code, sondern ich will nur wissen ob es machbar ist.
Aber bitte kein "müsste gehn", sondern überzeugt euch bitte auch davon (durch den Validator schicken).

Über Feedback würde ich mich freuen.... oder auch nicht, kommt halt auf den Inhalt an.

Gruss Dr Dau

[edit] Die Hintergrundgrafiken können natürlich auch transparent sein, aber auch dann müssen sie die Grösse wie zuvor beschrieben haben. [/edit]

27apricot · 19.06.05, 16:03

Hallo,

Noch 'ne Kleinigkeit: bei Elementen mit dem Attribut »position:absolute« sollte auch die Positionierung angegeben werden. Wenn ich mir die »beispiel_2.html« mit dem IE6 ansehe, verschwinden die ersten Zeilen von #nav und #content hinter #top. Also einfach dem CSS folgenden Code hinzufügen:

            
                    HTML-Code:
                  
                   	 #nav, #content { top: 40px; left: 0px; }

Außerdem konnte ich soeben mit Dr. Daus Hilfe meine eigene Forums-Anfrage zu dem verwandten Thema »Variable Höhe für Navi-DIV zwischen Kopf- und Fußzeile« quasi zum Tutorial vervollständigen. Die Unterschiede: (1) valides XHTML strict, (2) es gibt zusätzlich eine Fußzeile und (3) nur für das Navi-DIV ist eine Breite festgelegt. Vielleicht hilft auch das noch einigen weiter.

Schöne Grüße
27apricot

***Dr Dau*** · 19.06.05, 20:45

Hallo!

Da die DIV's alle links oben in der Ecke beginnen, ist die Position Top und Left gleich 0px.
Ob man nun top:0px (per default vorgegeben und daher nicht extra angegeben) und padding-top:55px nimmt oder top:50px und padding-top:5px, bleibt sich letztenendes gleich, kommt bei beidem insgesamt 55px bei raus.

Div#top hat eine Höhe von 50px, div#nav und div#content haben ein padding-top von 55px.
Somit kann rein rechnerrisch der Text vom div#nav und div#content garnicht durch div#top verdeckt werden, sondern fängt 5px tiefer an.

Selbst wenn der IE 6.0 für WinXP (ich gehe mal davon aus dass Du WinXP hast) die "height" Angabe von div#top richtig interpretieren würde, würde die erste Zeile im div#nav und div#content grade mal angekratzt werden.
Hast Du was an der beispiel_2.html geändert?
Oder hast Du evtl. im IE unter "Ansicht/Schriftgrad" "Grösser" anstatt "Mittel" stehen?
Dann ist es natürlich klar dass die erste Zeile verdeckt wird, die Schrift ist ja in keinerlei Art formatiert und ändert somit ihre Grösse/Zeilenabstand.
Die Schriftformatierung habe ich bewusst weg gelassen um den Quelltext nicht unnötig unübersichtlich zu machen.
Ich denke mal dass jeder die Schriftformatierung selber hinbekommt.

(1) XHTML habe ich aus schon genannten Gründen sein gelassen.
(2) Ist/war mit ein paar Änderungen sicherlich umsetzbar, für mich war ja nichtmal die Kopfzeile geplant.

(3) div#nav hatte auch schon vorher eine festgelegte Breite ( width: 140px; ).

Alles in allem denke ich dass mit deinem oder meinem Beispiel dem Einem oder Anderem sicherlich geholfen werden kann, zumindest ansatzweise.

Gruss Dr Dau

27apricot · 20.06.05, 10:40

Hallo Dr. Dau,

du hast natürlich Recht. Ich hab's mir nochmal genau angesehen mit der verdeckten Schrift. Das Problem entsteht nur bei der »Browse«-Ansicht in HomeSite 5. Dort ist der IE6 als Browser integriert, hat aber durch den eingebauten Win-Explorer-Balken wenig Platz. Dadurch war schlicht und einfach der Text im Kopf zu lang und der Balken wurde höher als 55px.

Also nochmal vielen Dank für die »Zusammenarbeit«

Schöne Grüße
27apricot.

***Dr Dau*** · 20.06.05, 12:24

Hallo!

So kann es kommen.

Da ich alles direkt im Quelltext schreibe und dann mit den jeweiligen Browser teste, kenne ich die ganzen Probleme die durch WYSIWYG Editoren entstehen können nicht.... von den Dingern bin ich ganz schnell wieder weggekommen.
Macht zwar mehr Arbeit aber letztlich lernt man so auch am besten.

Gruss Dr Dau

27apricot · 20.06.05, 12:32

Auch wenn's hier vielleicht nicht hingehört: aber HomeSite ist kein WYSIWIG-Editor, sondern zum Quelltext schreiben da. Hat aber eben eine integrierte Browse-Anzeige, zu der man aus dem Editier-Modus einfach per F12 wechseln kann. Ich jedenfalls hab' noch kein besseres Programm gefunden.
Ich halte auch ganz und gar nichts von WYSIWIG.

Schöne Grüße.
27apricot.

***Dr Dau*** · 20.06.05, 13:16

Also ich benutze UltraEdit, ein Text/Hex Editor mit Syntaxhervorhebung für verschiedene Scriptsprachen.
Eine Funktion "Datei im Browser anzeigen" hat er auch, diese ruft die Seite direkt im "Standard" Browser auf und nicht in einer integrierten Anzeige.
Was ich besonders praktisch finde ist, ich kann z.b. 20 Seiten offen haben und in allen (um mal wieder auf das Thema XHTML zu kommen) z.b. <br> durch <br /> gleichzeitig ersetzen lassen.
Wobei "gleichzeitig" eigentlich der falsche Ausdruck ist, genauer gesagt durchläuft er alle geöffneten Seiten im Batchmodus.

***Dr Dau*** · 21.06.05, 04:15

Hallo!

Hier nun also das 3. Beispiel.
1 Spalte links (Menü), 1 Spalte rechts (Content), 1 Kopfzeile und 1 Fusszeile.
Höhe 100%, Fusszeile wandert bei höher werdendem Menü und/oder Content weiter mit nach unten.
Diesmal ist die Seite auf eine Breite von 100% ausgelegt, hierbei ist zu beachten dass sich die Breite an der Monitorauflösung orientiert.

Weiterhin ist die Seite diesmal XHTML 1.0 Strict valide.

Die Grafik für das Menü ist wieder 140px breit (gleiche bg.gif aus dem erstem Beispiel).
Kopf- und Fusszeile haben diesmal eine Hintergrundfarbe anstatt einer Grafik (lässt sich aber ändern)

Was soll ich noch weiter sagen?!
Am besten ihr schaut es euch einfach mal an.

            
            
              
                
                  
                    HTML-Code:
                  
                

                  
                   	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
html, body
 {
 height: 100%;
 width: 100%;
 margin: 0px;
 padding: 0px;
 }
body
 {
 background-color: yellow;
 }
div#header
 {
 background-color: #96BD92;
 padding: 10px 20px 10px 20px;
 }
div#header h1
 {
 margin: 0px;
 font-size: 22pt;
 font-weight: bold;
 }
div#haupt
 {
 background-image: url(bg.gif);
 background-repeat: repeat-y;
 min-height: 100%;
 }
div#navi
 {
 float: left;
 width: 100px;
 padding: 5px 20px 20px 20px;
 }
div#content
 {
 margin-left: 140px;
 line-height: 150%;
 padding: 20px 20px 20px 20px;
 background-color: yellow;
 }
div#content h2
 {
 font-size: 22pt;
 margin: 0px;
 font-weight: bold;
 }
#cleardiv
 {
 clear: both;
 height: 1px;
 }
div#footer
 {
 clear: both;
 padding: 5px;
 text-align: center;
 background-color: #96BD92;
 }
</style>
<!--[if IE]>
 <style type="text/css">
  div#haupt {height: 100%;}
  div#navi {width:140px; padding-top: 20px; padding-bottom: 0px;}
  div#content {padding-bottom: 0px;}
 </style>
<![endif]-->
</head>
<body>
<div id="header">
 <h1>div#header</h1>
</div>
<div id="haupt">
 <div id="navi">
  <p>
   div#navi<br />div#navi<br />div#navi<br />div#navi<br />div#navi<br />
  </p>
 </div>
 <div id="content">
  <h2>div#content</h2>
  <p>
   div#content<br />div#content<br />div#content<br />div#content<br />div#content<br />
  </p>
 </div>
 <div id="cleardiv"></div>
</div>
<div id="footer">
 div#footer div#footer div#footer div#footer div#footer div#footer div#footer div#footer
</div>
</body>
</html>
                  
                

              
            
          

Gruss Dr Dau

sra · 26.01.06, 18:17

Ich hab das ganze noch zusätzlich in nem div, da es in der mitte positioniert und in der breite beschränkt sein soll. nun geht es bei mir nicht - hat jemand ne idee?

**Maik** · 26.01.06, 22:24

Zitat:

Zitat von sra

Ich hab das ganze noch zusätzlich in nem div, da es in der mitte positioniert und in der breite beschränkt sein soll. nun geht es bei mir nicht - hat jemand ne idee?

Schwer zu sagen, warum es bei dir nicht funktioniert, da du uns nicht mitgeteilt hast, für welches der drei Lösungsbeispiele / Modelle du dich entschieden hast, und wie dein HTML- und CSS-Code lautet.

Testweise habe ich mal Dr Daus beispiel_1.html so modifiziert, dass die zwei Spalten in einem horizontal zentrierten DIV eingebettet sind, dessen Hintergrundgrafik senkrecht wiederholt wird ... and it works

Das Demo (incl. Hintergrundgrafik) hänge ich als ZIP-Datei an.

mgd-one · 18.05.06, 17:53

Hallo zusammen,

ich habe mir die Beispiele mal angesehen. Das geht ja alles in die richtige Richtung. Aber das ist noch nicht ganz das was ich mir vorstelle.

Ich bräuchte ein bisschen Hilfe. Bin ein CSS-Neuling:

Top und Navi bekomme ich noch mit zwei Containern hin.

Aber Prblematisch wird es wenn ich drei Spalten für den Main bereich brauche und zum Abschluss eine Bottom Zeile benötige. Außerdem soll die Sub-Navi in einer Anderen Farbe als der Main und News Bereich.

Ach ja und das ganze soll eine Fixe Breite haben, sich aber in der höhe an allen drei Spalten (Sub-Navi, Main und News) ausrichten. Mit den 100% habe ich verstanden, aber geht das auch anders? Mich stört das, dass man noch ein bischen scrallen muss um ans Ende zu kommen obwohl kein Text mehr da steht.

Kann mir jemand helfen und mir nen Tipp geben wie ich das umsetzen kann?

Hoffe Ihr versteht was ich meine und könnt mir Helfen.

Gruß
mgd-one

**Maik** · 18.05.06, 19:12

Und eine weitere Modell-Variante, die ich wieder als ZIP-Datei anhänge.