klaudiusz: Gestrecktes div in gestrecktem div

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.

  1. tabellen oder CSS3 oder dirty-tricks?

    1. tabellen oder CSS3 oder dirty-tricks?

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

      1. 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

  2. @@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'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. 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.

      1. @@blhr:

        nuqneH

        "Web 2.0" standartaussehen :)

        Häh? Das wäre?

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. "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/

          1. Hallo,

            Farbverkauf

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

            *scnr*
             Martin

            --
            Die beste Informationsquelle sind Leute, die jemand anderem versprochen haben, nichts weiterzuerzählen.
              (alte Journalistenweisheit)
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          2. @@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'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            1. 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

              1. 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

                1. 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" :)

    2. @@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'

      1. 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

        --
        1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. 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

          1. 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

            --
            1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
            1. 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

              1. 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

                --
                1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
                1. 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

      2. @@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'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. @@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'