Div height 100% überschreitet parent div

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

  • Div height 100% überschreitet parent div

    Hallo,
    ich versuche gerade ein 3-Zeilen Layout umzusetzen.
    ---------------
    | Banner
    |Menu | Content
    | Footer
    ---------------
    Die Gesamthöhe soll dem anzeigbaren Bereich entsprechen.
    Es sollen also keine Scrollbars rechts am Browser auftreten. Nur beim Content soll über overflow:scroll gescrollt werden.
    Ich versuche es mit verschachtelten div,
    beiße aber irgendwie auf granit:
    Code:
    <div class="container">
     <div class="header">
      Header
     </div>
     <div class="left">
      Menu
     </div>
     <div class="content">
      Content
     </div>
     <div class="footer">
      Footer
     </div>
    </div>
    mit folgendem CSS:
    Code:
     
    html, body {
     margin: 0px;
     padding: 0px;
     height: 100%;
    }
    
    .container {
     width: 850px;
     height: 100%;
     border: 1px solid blue;
    }
    
    .header {
     margin-top: 25px;
     width: 850px;
     height: 180px;
     border: 1px solid black;
    }
    
    .content {
     height: 100%;
     overflow: scroll;
     border: 1px solid red;
    }
    
    .menu {
     float:left;
     width:200px;
     border: 1px solid green;
    }
    
    .footer {
     height: 50px;
     background-color: #aaa
    }
    Was aber passiert ist, dass height: 100% im content dazu führt, dass die gesamte bildschirmhöhe genutzt wird und nicht 100% vom übergeordneten div "container" - zu erkennen an der roten umrandung die die blaue schneidet.
    Ich verliere gerade den Durchblick und stehe mächtig auf dem Schlauch.
    Wie bekomme ich "content" auf 100% der höhe von "container"?
    Diverse "position:relative" ändern gar nichts, den Tipp solltet ihr also bitte vorher ausprobieren ob er funktioniert, wenn ihr mir dazu raten wollt
    Denke ihr könnt mir helfen - Danke

  • #2
    So wie ich das sehe würde ich sagen works as designed! Der content nimmt 100% vom container, welcher sich wiederum sich wiederum 100% vom body nimmt. Gib dem content eine Höhe in Pixeln und gut ist
    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

    Kommentar


    • #3
      Ja, aber eine feste Höhenangabe wollte ich eben vermeiden,
      damit bei allen Bildschirmauflösungen 100% des sichtbaren Bereichs genutzt werden und nicht 40% weiß bleiben aber dafür ne scrollbar erscheint.

      Kommentar


      • #4
        ...damit bei allen Bildschirmauflösungen 100% des sichtbaren Bereichs...
        Und was glaubst du was passiert wenn du einen div mit Höhe 120px machst und darunter einen mit Höhe 100%? Dann ist die Seite 120px + 100% hoch d.h. mehr als 100%
        Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

        [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
        Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

        Kommentar


        • #5
          Exakt dieser Sachverhalt ist mein Problem.
          Also interpretiere ich das so, dass es dafür keine "vernünftige" Lösung gibt?
          Dann werde ich um einen festen Wert nicht drumherumkomen.

          Kommentar


          • #6
            Gib einen festen Wert vor, der ungefähr hinkommt. Dann kannst du immer noch mittels JS eine Korrektur machen, damit nicht zu viel ungenutzter Platz bleibt.

            Gruss

            tobi
            Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

            [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
            Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

            Kommentar


            • #7
              Ich würde alle drei divs absolute positionieren.

              Den oberen mit top:0; left: 50%
              den mittleren mit top:höhe des oberen divs, bottom: höhe des unteren divs, left: 50%
              das untere mit bottom: 0

              Bei allen drei setzt du margin-left auf -(Breite deiner divs/2). Dann sind die auch zentriert...

              Habs nichts getestet, in der Richtung sollte es aber gehen.

              Kommentar


              • #8
                vielleicht meinst du faux frames

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

                Kommentar


                • #9
                  Original geschrieben von strauberry
                  Ich würde alle drei divs absolute positionieren.

                  Den oberen mit top:0; left: 50%
                  den mittleren mit top:höhe des oberen divs, bottom: höhe des unteren divs, left: 50%
                  das untere mit bottom: 0

                  Bei allen drei setzt du margin-left auf -(Breite deiner divs/2). Dann sind die auch zentriert...

                  Habs nichts getestet, in der Richtung sollte es aber gehen.
                  Ja, genau das ist meine gewünschte Lösung!
                  Vielen Dank.
                  Hätte ich irgendwie auch selber drauf kommen können, aber ich war so in mein height und relative mit 100% verstrickt, dass ich nicht drauf kam die höhenangabe wegzulassen und einfach top- und bottom-punkte zu definieren.

                  Das verschachtelete Div habe ich behalten, durch margin: 0 auto 0 auto; im obersten container habe ich auch alles zentriert.

                  Kommentar

                  Lädt...
                  X