Beluga: Div's und Prozentangabe

Hallo zusammen,
Möchte einen Div-Layer anlegen und ihm per CSS eine Größe und eine Breite zuweisen. Mein CSS sieht also so aus:

div.header {  
	width: 100%;  
	height: 10%;  
	background-color: red;  
}

Als Ergebnis sehe ich allerdings garnix.
Füge ich nun in mein Div-Tag den Buchstaben 'a' ein, sehe ich einen roten Balken mit einer an die Schriftgröße angepasste Höhe und 100% Breite.
Setze ich height auf 100px wird der Balken höher, setze ich width auf 50% halbiert sich die Breite.

Jetzt zu meiner Frage:
Wieso funktionieren meine Prozentangaben bei der Breite einwandfrei, bei der Höhe dagegen garnicht?

Wäre Euch dankbar, wenn Ihr bißchen Licht in's Dunkel bringen könntet.

  1. Hi,

    Wieso funktionieren meine Prozentangaben bei der Breite einwandfrei, bei der Höhe dagegen garnicht?

    sie funktionieren in beiden Fällen und richten sich nach einem (offenkundig vorhandenen) übergeordneten width:auto bzw. height:auto. *Diese* unterscheiden sich dahingehend, dass width:auto den verfügbaren Platz umspannt, height:auto jedoch den vom Inhalt benötigten. Da dieser erst später bekannt ist, ist definiert, dass ein darin enthaltener Prozentwert zum Wert auto berechnet wird. Zwischen height:1% und height:1000000000% existiert in der Situation also nicht der geringste Unterschied.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi Cheatah,
      danke für Deine scnelle Antwort, aber wie könnte ich dieses Dilemma lösen?
      Meine Prozentangaben (und damit beantworte ich auch die Frage von Matze) beziehen sich auf die Fenstergröße.

      1. Meine Prozentangaben (und damit beantworte ich auch die Frage von Matze) beziehen sich auf die Fenstergröße.

        Und wo gibst du die an?

        Tipp: html und body wollen eine Höhe haben.

        Grüße, Matze

      2. Hi,

        Meine Prozentangaben (und damit beantworte ich auch die Frage von Matze) beziehen sich auf die Fenstergröße.

        Nein, tun sie nicht.

        Du hättest gerne, daß sie sich auf die Fenstergröße beziehen, aber CSS richtet sich nicht nach Deinem Wunsch.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      3. Ich erspar dir mal weitere Rätsel und erklär dir deinen Fehler.

        Du gibst dem Element eine relative Höhe von 10%. Wie gefragt, "10% wovon"?

        Gehen wir mal davon aus, das <div> wäre das einzige Element.
        Dann sieht das so aus

        <html>  
            <body>  
                <div></div>  
            </body>  
        </html>
        

        Jetzt siehst du auch wonach sich die Höhe des <div> richtet.
        Relativ 10% der Höhe seines Elternelements. Und das ist <body>.
        Und wie hoch ist <body>? Geben wir <body> 100%. Doch 100% wovon?
        Richtig, von <html> und das ist abhängig vom Viewport (das ist dein Fensterinhalt). Also geben wir <html> auch 100%.

        Grüße, Matze

        1. Ich erspar dir mal weitere Rätsel und erklär dir deinen Fehler.

          ...

          Grüße, Matze

          Ich danke Dir, das war's.

  2. Hallo Beluga,

    Wäre Euch dankbar, wenn Ihr bißchen Licht in's Dunkel bringen könntet.

    10% wovon?

    Grüße, Matze