Ankündigung

Einklappen
Keine Ankündigung bisher.

div-Element mit 100% Höhe

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    div-Element mit 100% Höhe

    Hallo allerseits!

    Ich habe ein div-Element als Kasten um meinen ganzen restlichen Inhalt. In diesem div-Element gibt es jetzt ein zentriertes background-image welches auf der y-Linie wiederholt wird und den Hintergrund der ganzen Website darstellt.
    So siehts momentan aus:

    klick to flickr

    Bisher ist nämlich nur da Hintergrund wo auch Inhalt ist. Soll heißen das div-Element geht leider nicht vom oberen Rand bis an den unteren Rand.
    Ich möchte jetzt, dass sich der Hintergrund von gaaanz oben bis gaanz unten ständig wiederholt egal wieviel Inhalt das div-Element hat oder wie groß das Browserfenster ist.

    Wie bekomme ich das hin? Meinem div-Element eine Höhe von 100% zuweisen bringt auch nichts. Bisher sieht der CSS-Code für dieses div-Element so aus:
    Code:
    #root {
    background-image: url(./grfx/bg.png);   
    background-repeat: repeat-y; 
    width: 1020px;
    margin: auto;
    margin-top: -8px;
}
    Ich hoffe ihr könnt mir helfen.

    Viele Grüße, Juuro
    Stichworte: -
  • #2
    einem Element eine prozentuale Höhenangabe zu geben ist zwecklos..
    probier mal margin-bottom: 0px

    Kommentar

    • #3
      Habs nu woanders gefunden. So gehts:

      Code:
      html, body {
     margin:0;
     padding:0;
     height:100%;
}
#root {
     min-height: 100%;
}
* html #root {
     height: 100%;
}

      Kommentar

      • #4
        einem Element eine prozentuale Höhenangabe zu geben ist zwecklos..
        Wer sagt denn sowas ?
        Zwecklos ist es wenn der falsche DOCTYPE gesetzt ist.

        Kommentar

        • #5
          Zitat von CIX88
          einem Element eine prozentuale Höhenangabe zu geben ist zwecklos..
          Wer sagt denn sowas ?
          Zwecklos ist es wenn der falsche DOCTYPE gesetzt ist.
          Docktype? Was hat das denn mit dem Docktype zu tun? Welcher ist in dem Fall der "falsche" Docktype?

          Kommentar

          • #6
            Also ich tippe jetzt nicht alles ab, deshalb:

            http://de.selfhtml.org/html/allgemein/grundgeruest.htm
            http://www.w3.org/TR/html401/struct/global.html
            http://carsten-protsch.de/zwischenne...inleitung.html

            Besonders der letzte Link ist gut erklärt.
            Auch hier im Forum wurde bereits darauf eingegangen.

            EDIT:
            http://carsten-protsch.de/zwischenne...e/prozent.html

            Kommentar

            • #7
              Beispiel:
              Code:
              [....]
<body>
    <div style="height: 100%;">
        lalala
    </div>
</body>
[....]
              100% von was ??
              -> min-height: 100% (wohin solls noch wachsen??)

              Kommentar

              • #8
                Zitat von Papst
                ....100% von was ??.....
                immer 100% der auflösung, die man gerade benutzt. andernfalls machen prozentuelle angeben keinen sinn !

                ich arbeite auch mit verschiedenen auflösungen und kann daher seiten, mit festen angaben, auf den tod nicht ausstehen.

                Kommentar

                • #9
                  schonmal Quatsch.
                  100% ergibt (gutmeinend interpretiert) einen Pixelwert. Eine Auflösung hat dagegen eine Einheit wie Pixel/inch.

                  Auch wenn Du Eistellung der Bildschirmhöhe meintest ist das nur tw. richtig.
                  Fakt ist, % Angaben richten sich immer nach dem übergeordneten Container. Was das Problem nur verlagert, spätestens bei html oder * ist Schluß. Einige, aber lange nicht alle, Browser interpretieren eine prozentuale Angabe dort als Höhe des verfügbaren Browserbereiches.

                  Für eine sinnvolle Variante (die allerdings dieses Problem nicht löst), halte ich Angaben in em, also abhängig von der Schriftgröße zu machen. Dann klappts auch auf ner 800er Auflösung, weil die Schrift dort auch vergelichsweise groß ist.

                  Kommentar

                  Vorherige Weiter
                  Lädt...
                  X