✔ Div 100% height style probleme

[Maik]

Zum Vergleich kannst du ja mal die angehängten Beispiele (ZIP-Datei) in meinem CSS-Tutorial CSS-Layout mit 100%-Höhe studieren.

 

[mardusi]

Das löst aber nicht mein Problem, das dieses keine Grafik. Will ja das er sich streckt in gewisserweiße oder wird das nicht klappen ?

weil normalerweise sollte er es doch automatisch erweitern bis an den Footer. Und da die Content sich ab und zu ändern wird das schwer mit einem Bild

 

[Maik]

Dann erstellst du dir eben eine entsprechende Grafik, die den Hintergrund erzeugt, und wendest die empfohlene Technik an.

Ansonsten erstreckt sich der Hintergrund im DIV #content nur so weit, wie es sein Inhalt von ihm abverlangt.

 

[mardusi]

So da bin ich mal wieder

http://www.downtownraiderz.de/test.php?content=./pixlie/pixlie.php

hab das jetzt gemacht sieht einfach Bescheiden aus ...

das Div #content geht doch nach meiner Logik bis unten an den Footer .. sprich ich will z.B im Fall Galerie die 2 teilige optik habn ?

evtl jemand ne Idee -> hier geht es doch auch http://www.downtownraiderz.de/pixlie/pixlie.php

 

[Maik]

Ich denke, ich hab dir alles gesagt, was es dazu zu sagen gibt, und dir zusätzlich mein CSS-Tutorial empfohlen, dessen verwendete Technik dir sehr wohl weiterhilft und letzlich das Problem löst, wenn du es mal in aller Ruhe durcharbeitest und dir die 4. Variante (3cols_header_topNavi_footer.htm) in der ZIP-Datei genauer anschaust. Die Vorlagen beruhen zwar auf einem dreispaltigen Layout, aber genau so gut lässt sich die Technik auf einen Zwei- oder Vierspalter anwenden.

Nach fünf Minuten kannst du es wohl kaum beurteilen, wenn du denn überhaupt die ZIP-Datei heruntergeladen und einen Blick in die Quellcodes der vier Beispiele geworfen hast. Was ich aber in der Kürze der Zeit, die zwischen meiner Empfehlung und deiner Antwort vergangen ist, doch stark bezweifel.

Und nein, das DIV #content reicht nicht bis zum Footer, sondern erstreckt sich nur so weit, wie es eben sein Inhalt von ihm abverlangt, deshalb ergab sich ja heute Mittag auch die weiße Lücke zum Footer.

Deshalb hinkt auch der Vergleich mit dem Tabellenkonstrukt, das in der Höhe auf 100% gestreckt wird.

 

[mardusi]

so ein neues problem ...

und zwar wollte ich mein code jetzt so bearbeitet das er nur 750px breite freigibt aber das klappt nur im IE7 nicht aber im Firefox

* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
min-width:750px;
}

#container {
  position:relative;
  width:750px;
  padding: 0;
  background-image:url(images/main_content.png);
  min-height:100%;
  height:auto !important;
  height:100%;
}

#header{
 padding:0;
 height:100px;
 background-image:url(images/carbon_bg.gif);
}

#navigation{
 padding:0;
 background-color: #99FF99;
 min-width:750px;
 height:21px;
}

#content {
 padding-bottom:20px;
 min-height: 400px;
 height: auto;
 
}

#footer{
 position:absolute;
 bottom:0;
 text-align:center;
 vertical-align:middle;
 padding:0;
 background-color: #736896;
 width:750px;
 height:20px;
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

und zentriert möcht ich den auch noch haben

 

[Maik]

Hi,

was verstehst du bitte unter der Freigabe einer Breite von 750px? :suspekt:

Wenn du das DIV #container horizontal zentrieren möchtest, sollte margin:0 auto die erste Wahl sein.

Diese Angabe ist aber im Original-Stylesheet meines verwendeten CSS-Tutorials CSS-Layout mit 100%-Höhe schon für das DIV #wrapper definiert