ThomasLa: DIV mit 100% Höhe (=Länge des Inhalts, nicht nur Browserfenster)

Hallo,

ich will auf meiner Seite links einen blauen Balken runterziehen, und zwar ganz nach unten (bis die Seite wirklich aus ist, nicht nur bis zum Ende des Browserfensters). Geht das mit einem DIV?? "height:100%" funktioniert jedenfalls nicht :-(
Bis jetzt hab ich's mit einer Tabelle gemacht, da war das ziemlich einfach ;-) Aber jetzt will ich das Layout auf DIVs umstellen.

Danke!!

  1. Hallo,

    ich will auf meiner Seite links einen blauen Balken runterziehen, und zwar ganz nach unten (bis die Seite wirklich aus ist, nicht nur bis zum Ende des Browserfensters). Geht das mit einem DIV?? "height:100%" funktioniert jedenfalls nicht :-(
    Bis jetzt hab ich's mit einer Tabelle gemacht, da war das ziemlich einfach ;-) Aber jetzt will ich das Layout auf DIVs umstellen.

    Danke!!

    Gibts eventuell einen Link zu der Seite um sich das Ganze besser vorstellen zu können?

    1. Gibts eventuell einen Link zu der Seite um sich das Ganze besser vorstellen zu können?

      Nein, aber ich hätt's gern so wie auf www.wachau.at (die beiden braunen Balken links und rechts). Die haben das mit Tabellen gemacht.

      Danke!

      1. Gibts eventuell einen Link zu der Seite um sich das Ganze besser vorstellen zu können?

        Nein, aber ich hätt's gern so wie auf www.wachau.at (die beiden braunen Balken links und rechts). Die haben das mit Tabellen gemacht.

        Danke!

        Das könntest du mit zwei DIVs machen, die nebeneinander floaten.

        <div id="links">MENU</div><div id="rechts">INHALT</div>

        CSS-CODE:
        #links {
          float: left;
          background-color: #880000;
          width: 200px;
        }
        #rechts {
          background-color: #FFF;
          margin-left: 200px;
        }

        Ich habe es aber jetz nicht getestet ob es funktioniert.

        Liebe Grüße
        Thomas

        1. Insbesondere mit floats kriegst du dann aber keine Balken, die sich über die ganze Seite ziehen.

          Da dann doch wieder der Trick mit der Hintergrundgrafik ala

          <div id="wrapper">
          <div id="links">MENU</div>
          <div id="rechts">INHALT</div>
          <div id="breaker"></div>
          </div>

          CSS-CODE:
          #wrapper {
            background: transparent url('balkenhintergrund.jpg') repeat-y;
          }
          #links {
            float: left;
            background-color: #880000;
            width: 200px;
          }
          #rechts {
            background-color: #FFF;
            margin-left: 200px;
          }
          #breaker {
            height: 1px;
            line-height: 1px;
            font-size: 1px;
          }

          Damit kriegst du hübsche Balken hin, ohne dass du deine Divs irgendwie künstlich langziehen musst, weil gerade mit Float hören die Divs genau nach Ende des Inhalts auf.

          Btw. wachau.at hat einen wilden Mix aus Frames und Tabellen. Ka ob du dir das als Vorbild nehmen solltest.

          Gruß Ben

          1. Funktioniert bei mir nicht. Obwohl ich zugeben muss, dass ich den Sinn des Breaker-DIV nicht verstehe.

            1. Funktioniert bei mir nicht. Obwohl ich zugeben muss, dass ich den Sinn des Breaker-DIV nicht verstehe.

              Der Breaker hebt die Floats auf, damit wird der Wrapper auf die volle Höhe des höchsten Child-Div's aufgezogen. Und damit kann man dann wiederum mit Hintergrundbildern arbeiten und fake Columns aufbauen.

              Gruß Ben

              1. OK - verstehe. Aber dann wird der Balken nur bildschirmfüllend, wenn auch der Inhalt bildschirmfüllend ist - nehm ich an?! Und das kann ich ja nicht wissen, weil's von der Auflösung des Betrachters abhängt.

        2. Hab's ausprobiert: Wie yetanotheruser sagt: Der braune Balken links wird nur so hoch wie der Inhalt dieses DIV. Trotzdem danke!

  2. Gibt body nen Hintergrundbild mit, dass einen blauen Balken generiert ?

    Sowas in der Art
    <body style="background-image:url('blauerbalken.jpg'); background-repeat:repeat-y;">

    blauerbalken,jpg wäre in diesem Fall ein sobreitewiederbalkenseinsoll x 1 Pixel Bild. Damit kriegste nen blauen Balken, der wirklich bis zum Ende der Seite geht.

    Gruß Ben

    1. Genial! Funktioniert! Danke!!

  3. Hallo,

    ich will auf meiner Seite links einen blauen Balken runterziehen, und zwar ganz nach unten (bis die Seite wirklich aus ist, nicht nur bis zum Ende des Browserfensters). Geht das mit einem DIV?? "height:100%" funktioniert jedenfalls nicht :-(
    Bis jetzt hab ich's mit einer Tabelle gemacht, da war das ziemlich einfach ;-) Aber jetzt will ich das Layout auf DIVs umstellen.

    Danke!!

    Ich hätte eine ganz ähnliche Frage: ich möchte ein Textfeld haben, dass aber nicht bis ganz unten läuft sondern unten nochmal grafisch gefasst ist (für Druckerfunktion und so und weils schöner ausschaut). Der Abstand unten soll z.B. immer 40px groß sein. Habe geglaubt, dass könne man mit einer Bottom-Angabe lösen (nach dem Motto von links soundsoviel, von Oben soundsoviel und von unten soundsoviel und ne fixe Breite ergeben das aufzuspannede fenster) Finden auch alle Browser so nur ie mal wieder nicht. Der macht sein Textfeld halt einfach größer oder kleiner, wie er will.

    die Css zum anschauen: www.sued-teneriffa.de/layout.css
    die Seite um die es geht www.sued-teneriffa.de/index1.html