CL: Prozentuale Höhe versch. Elemente an der Höhe des Elternelements

SELF-Forum

Prozentuale Höhe versch. Elemente an der Höhe des Elternelements

CL
– Informationen zu den Bewertungsregeln

Guten Tag,
ich habe ein kleines Problem. Ich habe ein Div-Element mit folgendendem CSS Code:

#MainDiv {  
    width: 100%;  
    height: 100%;  
    margin-right: auto;  
    margin-left: auto;  
}

Untergeordnet einen weiteren Div:

#UnterDiv {  
    text-align: center;  
    width: 100%;  
    height: 100%;  
}

Diesem untergeordnet befinden sich 5 Bilder, die eine Höhe von 15% des Elternelements besitzen sollen:

.image {  
    height: 15%;  
}

Das funktioniert so leider nicht (getestet mit Firefox). Was ist der Fehler?

Grüße, Knight

--
ie:{ fl:) br:^ va:) ls:~ fo:| rl:( n4:& ss:| de:> js:) ch:| sh:} mo:} zu:(
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Prozentuale Höhe versch. Elemente an der Höhe des Elternelements

    Take Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin,

    Guten Tag,
    ich habe ein kleines Problem. Ich habe ein Div-Element mit folgendendem CSS Code:

    [...]

    Das funktioniert so leider nicht (getestet mit Firefox). Was ist der Fehler?

    Die Divs kriegen die Höhe/Breite des Bodys, die du nicht angibst.

    body, html {height:100%; width:100%;} sollte dein Problem lösen.

    Grüße, Knight

    Gruß,
    Take

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Prozentuale Höhe versch. Elemente an der Höhe des Elternelements

      CL
      – Informationen zu den Bewertungsregeln

      Guten Tag,

      Die Divs kriegen die Höhe/Breite des Bodys, die du nicht angibst.

      body, html {height:100%; width:100%;} sollte dein Problem lösen.

      Der Body sieht bereits so aus:

      html, body {  
   margin: 0;  
   padding: 0;  
   height: 100%;  
   width: 100%;  
}

      Vielleicht ist es wichtig, aber die Bilder sind zusätzlich in Links eingefasst. Die Links haben nichts außer margin-right: 40px; in ihrem Style Attribut (Im Style Attribut, da mit JavaScript hinzugefügt).
      Alles zusammen ist im #wrapper eingefasst. Der sieht von den Style Infos so aus:

      #wrapper {  
   margin: auto;  
   min-height: 100%;  
   height: auto !important;  
   height: 100%;  
   overflow: hidden !important;  
}

      Ich finde das Problem immernoch nicht...

      Grüße, CL

      --
      ie:{ fl:) br:^ va:) ls:~ fo:| rl:( n4:& ss:| de:> js:) ch:| sh:} mo:} zu:(
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Prozentuale Höhe versch. Elemente an der Höhe des Elternelements

        Beat Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Vielleicht ist es wichtig, aber die Bilder sind zusätzlich in Links eingefasst. Die Links haben nichts außer margin-right: 40px; in ihrem Style Attribut (Im Style Attribut, da mit JavaScript hinzugefügt).

        Also sind Sie inline Elemente, die so gross werden, wie die intrinische Grösse des Inhaltes.
        Fehler eins!

        Alles zusammen ist im #wrapper eingefasst. Der sieht von den Style Infos so aus:

        #wrapper {

        margin: auto;
           min-height: 100%;
           height: auto !important;
           height: 100%;
           overflow: hidden !important;

        Setze background: red;

        }

          
Schau dir an, wie hoch dein Wrapper ist.  
Derzeit orientiert er sich am Platzbedarf des Inhalts.  
  

> Ich finde das Problem immernoch nicht...  
  
Wenn ein Ururururururururuenkel 100% von seinem Ururururururururugrosvater erben soll, bedingt das, das alle Söhne dazwischen 100% von ihrem Vater erben.  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Prozentuale Höhe versch. Elemente an der Höhe des Elternelements

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@CL:

    nuqneH

    Ich habe ein Div-Element
    Untergeordnet einen weiteren Div:

    „Dass viele "Designer" der Meinung sind, <html> und <body> sollten möglichst neutralisiert und das Layout dann mittels <div>-Elementen umgesetzt werden, ist bedauerlich bis ärgerlich.“ [at] S.a. Zentrieren ohne zusätzliches Markup [Postner] im Webkrauts-Adventskalender 2010.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln