4 DIVs untereinander und 2 variabel

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 4 DIVs untereinander und 2 variabel

    Hallo,

    ich möchte 4 divs untereinandersetzen. die ersten 2 oberen DIVs haben eine feste Größe.

    Die 2 letzten unteren sollen prozentual 50% auf die restliche höhe aufgeteilt werden.

    Alle 4 Divs sollen zusammen 100% höhe erreichen!

    Mit dem HTML-Code hier klappt das auch soweit, aber das 3. Div verkleinert sich schneller als das 4. weiß jemand warum?

    es sollen aber beide immer die gleiche größe haben, wenn das fenster verkleinert wird!

    ?
    Danke!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html style="height:100%;" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
        <div style="background:#00ffff; height:50px;">
            Div 1
        </div>
        <div style="background:#0000ff; height:150px;">
            Div 2
        </div>
        <div style="background:#00ff00; height:50%; margin-top:-100px;">
            Div 3
        </div>
        <div style="background:#ff0000; height:50%; margin-top:-100px;">
            Div 4
        </div>
    
    </body>
    </html>

  • #2
    Alle 4 Divs sollen zusammen 100% höhe erreichen!
    100% von was?


    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      100% = Fensterhöhe!

      Kommentar


      • #4
        und welche höhe hast du bei body angegeben? keine.

        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          body braucht keine...nur das html element!
          bei body tut sich nix!

          merkre grad, das 2. div hat auch nicht die höhe von 150px;

          mhhh...

          //edit: ob ich es im html oder body stehen hat, ist den browser egal...wie ich sehe. hab auch ins body rein gemacht. => gleicher effekt!
          Zuletzt geändert von ; 11.06.2007, 13:49.

          Kommentar


          • #6
            bei body tut sich nix!
            bei mir schon.
            das 2. div hat auch nicht die höhe von 150px;
            margin-top?

            außerdem wird das sowie so problematisch mit den 100%, da du zwei elemente mit absoluter höhe hast.

            gruß
            peter
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              naja, meinte damit das es kein unterschied macht, ob es im html oder body steht!

              warum sollte das 2 div. margin-top haben. liegt doch sowie so unter dem anderen! das 3. überschneidet das...

              das muss doch irgend wie umzusetzen sein, will keine frames verwenden sondern ajax framework!

              und tabellen wollte ich nicht unbedingt nutzen!

              Kommentar


              • #8
                warum sollte das 2 div. margin-top haben
                nein, das driite hat eins. deswegen auch keine optischen 150px.
                das muss doch irgend wie umzusetzen sein
                hatte mal ein ähnliches problem. da kommst du imho um einen js-hack nicht herum. bedank dich bei dem kerl, der für dieses idiotische boxmodell verantwortlich ist.

                gruß
                peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  naja...auf js hab ich da kein bock!
                  mit einer tabelle sollte es gehen, auch wenn ich da gern ein großen bogen drum rum machen würde!

                  trotzdem danke!

                  Kommentar

                  Lädt...
                  X