Div's und Prozentangabe
Beluga
- css
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.
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
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.
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
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
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
Ich erspar dir mal weitere Rätsel und erklär dir deinen Fehler.
...
Grüße, Matze
Ich danke Dir, das war's.
Hallo Beluga,
Wäre Euch dankbar, wenn Ihr bißchen Licht in's Dunkel bringen könntet.
10% wovon?
Grüße, Matze