Gestrecktes div in gestrecktem div

[klaudiusz]

Hallo @all!

Wie man ein div auf die ganze Höhe des Browsers streckt, weiss ich:

  
html, body {  
background-color: #333333;  
margin: 0;  
padding: 0;  
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */  
}  
  
#wrapper {  
background-color: #FFFFFF;  
width: 80%;  
margin: auto; /* Div soll zentriert werden */  
min-height: 100%; /* Mindesthöhe für moderne Browser */  
height:auto !important; /* Important Regel für moderne Browser */  
height:100%; /* Mindesthöhe für den IE */  
overflow: hidden !important; /* FF Scroll-leiste */  
}  

Siehe auch: hier!

Allerdings möchte ich im <div id="wrapper"> oben ein header positionieren (mit fixer höhe). Darunter soll wieder ein Div sein, das wiederum die restliche Höhe ausnutzt, also gestreckt ist.
Hier jedoch funktioniert dieselbe Methode wie bei #wrapper nicht mehr:

  
min-height: 100%; /* Mindesthöhe für moderne Browser */  
height:auto !important; /* Important Regel für moderne Browser */  
height:100%; /* Mindesthöhe für den IE */  

Hat jemand eine Idee, wie sich das lösen lässt. Bei Google finde ich leider nichts Brauchbares dazu.

[blhr]

tabellen oder CSS3 oder dirty-tricks?

[klaudiusz]

tabellen oder CSS3 oder dirty-tricks?

Tabellen, nein danke! CSS3, bitte! dirty-tricks, wenns sein muss! ;-)

[blhr]

tabellen oder CSS3 oder dirty-tricks?
Tabellen, nein danke! CSS3, bitte!

CSS3 table-layout? das erlaubt "tabellenartiges verhalten" für container - ich kann jetzt schlecht googeln, aber das findest du scho

[Gunnar Bittersmann]

@@klaudiusz:

nuqneH

Allerdings möchte ich im <div id="wrapper"> […]

Dises ist wohl völlig überflüssig.

Darunter soll wieder ein Div sein, das wiederum die restliche Höhe ausnutzt

Wozu?

Qapla'

[blhr]

Darunter soll wieder ein Div sein, das wiederum die restliche Höhe ausnutzt

Wozu?

"Web 2.0" standartaussehen :), ja mit "t".
vorschlag - man setzut header in den "hauptcontainer" und lässt dne sonstigne inhalt einfah etwas verdrägen - plus kaschieren des oberteils des hauptDIVs. der muss nicht wirklcuh 100%-x sein, wenn man die x eh nciht sieht.

[Gunnar Bittersmann]

@@blhr:

nuqneH

"Web 2.0" standartaussehen :)

Häh? Das wäre?

Qapla'

[suit]

"Web 2.0" standartaussehen :)

Häh? Das wäre?

Farbverkauf in der Schrift, Spiegelung und Glossy-Effekt und natürlich das "Beta" nicht vergessen.

http://creatr.cc/

[Der Martin]

Hallo,

Farbverkauf

also sind wir im Fachgeschäft für Malerbedarf? ;-)

*scnr*
 Martin

[Gunnar Bittersmann]

@@suit:

nuqneH

Farbverkauf in der Schrift, Spiegelung und Glossy-Effekt und natürlich das "Beta" nicht vergessen.
http://creatr.cc/

Und sich nicht einig sein, ob das Zeugs nun „Generator“, „Creator“ oder ganz hip „Creatr“ heißt.

Qapla'

[suit]

Und sich nicht einig sein, ob das Zeugs nun „Generator“, „Creator“ oder ganz hip „Creatr“ heißt.

Web 2.0 - da gehört Inkonsistenz dazu, das ist wie in einem Wiki - da wird kolaborativ dran gearbeitet und jeder zieht auf einer anderen Unterseite sein eigenes Ding durch. Ich versteh ehrlich nicht, was es daran zu meckern gibt :D

[Alex]

Und sich nicht einig sein, ob das Zeugs nun „Generator“, „Creator“ oder ganz hip „Creatr“ heißt.

Web 2.0 - da gehört Inkonsistenz dazu, das ist wie in einem Wiki - da wird kolaborativ dran gearbeitet und jeder zieht auf einer anderen Unterseite sein eigenes Ding durch. Ich versteh ehrlich nicht, was es daran zu meckern gibt :D

Jawohl! Und Deppen Leerzeichen wie in "Web 2.0 Logo" sind auch Pf Licht! Und eine Gallerie, ab Web 3.0 dann mit 3 L!

;)
Alexander

[suit]

Web 2.0 - da gehört Inkonsistenz dazu, das ist wie in einem Wiki - da wird kolaborativ dran gearbeitet und jeder zieht auf einer anderen Unterseite sein eigenes Ding durch. Ich versteh ehrlich nicht, was es daran zu meckern gibt :D

Jawohl! Und Deppen Leerzeichen wie in "Web 2.0 Logo" sind auch Pf Licht! Und eine Gallerie, ab Web 3.0 dann mit 3 L!

Stilgerecht muss das in Web 3.0 wird das Galery heissen - da wird dann der Scheingermanismus wieder (falsch) rückimportiert. So wie "Kindergarten" oder "Rucksack" :)

[klaudiusz]

@@klaudiusz:

nuqneH

Allerdings möchte ich im <div id="wrapper"> […]

Dises ist wohl völlig überflüssig.

der Body hat eine Textur als Hintergrund. <div id="wrapper"> hat dann weiss als Hintergrund.
Wäre der wrapper transparent, hätte ich in wirklich weglassen können.

Darunter soll wieder ein Div sein, das wiederum die restliche Höhe ausnutzt

Wozu?

Genau genommen gibts unter den header dann zwei divs. Eins für den Inhalt, das muss nicht unbedingt gestreckt sein.
Das Zweite für ein Seitenmenu sollte dann aber schon, da ich mit border-left in css eine Linie von ganz oben bis ganz unten gezogen haben möchte.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, klaudiusz!

der Body hat eine Textur als Hintergrund. <div id="wrapper"> hat dann weiss als Hintergrund.

gestalte html und body statt body und wrapper.

Matthias

[klaudiusz]

Om nah hoo pez nyeetz, klaudiusz!

der Body hat eine Textur als Hintergrund. <div id="wrapper"> hat dann weiss als Hintergrund.

gestalte html und body statt body und wrapper.

Ich habs gerade umgeändert. Nun ists so gelöst.
Jedoch löst das das Problem nicht, dass ich die Seitenleiste gerne gestreckt hätte.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, klaudiusz!

Jedoch löst das das Problem nicht, dass ich die Seitenleiste gerne gestreckt hätte.

prozentualeHöhenangaben können nur greifen, wenn für mindestens ein Elternelement eine Höhe explizit festgelegt wurde.

Matthias

[klaudiusz]

Om nah hoo pez nyeetz, klaudiusz!

Jedoch löst das das Problem nicht, dass ich die Seitenleiste gerne gestreckt hätte.

prozentualeHöhenangaben können nur greifen, wenn für mindestens ein Elternelement eine Höhe explizit festgelegt wurde.

D.h. es gibt keine Möglichkeit das zu lösen? :S

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, klaudiusz!

wenn alle Vorgängerelemente die Höhe auto haben, sind 100% von auto nunmal auto.

Ansonsten wäre es jetzt an der Zeit, ein funktionierendes Online-Beispiel bereitzustellen.

Matthias

[klaudiusz]

Hier ist die Seite etwas vereinfacht:

  
<html>  
<head>  
<style>  
html{  
  height: 101%;  
  background-image: url("texture.jpg");  
}  
  
body{  
  width: 1050px;  
  margin: auto;  
  margin-top: 30px;  
  margin-bottom: 15px;  
  padding-top: 25px;  
  background-color: #ffffff;  
}  
  
#layout-header{  
  width: 1000px;  
  height: 300px;  
  margin: auto;  
  background-color: red;  
}  
  
#layout-navigation{  
  width: 1000px;  
  margin: auto;  
  margin-top: 10px;  
  border: none;  
}  
  
#layout-content{  
  float: left;  
  width: 840px;  
  margin-left: 25px;  
  border: none;  
}  
  
#layout-rightbar{  
  float: right;  
  width: 140px;  
  border-left: 1px dashed #cfcfc5;  
  padding-left: 15px;  
}  
</style>  
</head>  
<body>  
<div id="layout-header"></div>  
<div id="layout-navigation">Link1 | Link2 | Link3 | Link4</div>  
<div id="layout-content">Lorem Ipsum...Blub!</div>  
<div id="layout-rightbar"> Sidebar<div>  
</body>  
</html>  

<div id="layout-rightbar"> soll die ganze restliche Höhe des Body einnehmen, so dass eine durchgezogene Linie von oben bis unten entsteht.

Om nah hoo pez nyeetz, klaudiusz!

wenn alle Vorgängerelemente die Höhe auto haben, sind 100% von auto nunmal auto.

Ansonsten wäre es jetzt an der Zeit, ein funktionierendes Online-Beispiel bereitzustellen.

Matthias

[Gunnar Bittersmann]

@@klaudiusz:

nuqneH

Dises ist wohl völlig überflüssig.

der Body hat eine Textur als Hintergrund. <div id="wrapper"> hat dann weiss als Hintergrund.

Ja, und? Hast du das Verlinkte nicht verstanden oder bist du den Links gar nicht erst gefolgt?

S.a. https://forum.selfhtml.org/?t=206783&m=1404462

Qapla'

[klaudiusz]

@@klaudiusz:

nuqneH

Dises ist wohl völlig überflüssig.

der Body hat eine Textur als Hintergrund. <div id="wrapper"> hat dann weiss als Hintergrund.

Ja, und? Hast du das Verlinkte nicht verstanden oder bist du den Links gar nicht erst gefolgt?

S.a. https://forum.selfhtml.org/?t=206783&m=1404462

Habs so umgebaut, wie im Artikel beschrieben. Die Seite sieht jetzt wieder gleich aus wie vorher.
Das Problem mit den Strecken der Seitenleiste ist aber nicht gelöst, die Methode wie im ersten Post beschrieben funktioniert so auch nicht.

Qapla'