✔ div height=100% nur im IE?

Status
Nicht offen für weitere Antworten.
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: 
<!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
 
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?
 
sra hat gesagt.:
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?
Zum Vergrößern anklicken....
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.
 

Anhänge

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
 

Anhänge

  • 24362attachment.jpg
    24362attachment.jpg
    23,3 KB · Aufrufe: 1.279
Ah super,

allerdings verstehe ich nicht warum es in der Mitte zentriert ist.

Kannst du mir noch sagen wie ich das auschalte?

Gruß
mgd-one

// edit

Sorry schon gefunden ;)

Gruß
mgd-one
 
Maik hat gesagt.:
Und eine weitere Modell-Variante, die ich wieder als ZIP-Datei anhänge ;)
Zum Vergrößern anklicken....

Ich poste deswegen hier, weil es meines erachtens das selbe Problem ist!

Welche Möglichkeit gibt es die Seite auf 500px mindesthöhe festzusetzen und links und rechts noch eine Spalte hinzuzufügen, die auch mit dem Content mitwächst.

Ich erkläre nochmal zum besseren Verständnis an meiner farbig angehänger Grafik.

Navigation ist dunkelblau links
Content ist dunkelblau rechts
eine Trennung ist zwischen Navi und Cont (grau)
Rot ist der Header
und grün der Rand links und rechts
gelb ist der footer

Wenn der Blaue bereich wächst, egal ob Content oder Navi soll sich der grüne Rand und der Footer nach unten verschieben, ohne das es diese überlappenden div's gibt.

Ich habe schon viel mit dem Beispiel von Dir hantiert, aber bin leider nicht auf eine Lösung gekommen.

Danke und Gruß
 

Anhänge

  • 24610attachment.gif
    24610attachment.gif
    3,5 KB · Aufrufe: 185
In diesem Fall wirst du dir eine entsprechende Hintergrundgrafik erstellen müssen, die die 5 Spalten nachstellt. Eine Mindesthöhe lässt sich mit der min-height-Eigenschaft einrichten.
 
Das Problem an der Sache ist aber, die äußeren Spalten (grün) haben einen Verlauf von oben nach unten und die mittleren drei von links nach rechts.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück