nicht angemeldet
height: 100% und mehrer DIVS untereinander
Hallo selfhtml Gemeinde,
ich habe ein CSS Problem, und zwar wenn ich mehrere DIVs untereinander habe, z.B.
<div id="a">
</div>
<div id="b">
</div>
<div id="c">
</div>
und dann haben das Element A und B z.B. die Heights: 100px und 200px. Wie mache ich das jetzt gescheit wenn ich Element C eine Höhe von 100% geben will. Also Element C soll die komplette Höhe der Seite von X=300 bis ganz unten einnehmen.
Wenn ich das aber so mache, dann macht Firefox zwar die Höhe auf 100% aber nimmt dann die komplette Bildschirm Höhe, und macht somit die Seite Scrollbar.
Also nochmal einfacher. Wenn ich eine Bildschirmhöhe von 768px zur verfügung habe, der obere Teil genau 300px einnimmt, dann dachte ich eigentlich das die 100% Angabe dann 468px einnimmt.
So ist es aber so, das der obere Teil 300px einnimmt, und der untere Teil trotzdem 768px, und insgesamt die Seite dann 1068px hoch ist.
Hat jemand eine Idee oder einen Ansatz? Das wäre super, denn ich bin echt schon Stunden damit beschäftigt eine gesheit Lösung zu finden.
Vielen Dank,
Henry
-
Hallo,
und dann haben das Element A und B z.B. die Heights: 100px und 200px. Wie mache ich das jetzt gescheit wenn ich Element C eine Höhe von 100% geben will. Also Element C soll die komplette Höhe der Seite von X=300 bis ganz unten einnehmen.
Was denn nun? Soll C jetzt 100% Höhe haben, oder 100% - 300px?
Wenn ich das aber so mache, dann macht Firefox zwar die Höhe auf 100% aber nimmt dann die komplette Bildschirm Höhe, und macht somit die Seite Scrollbar.
Was dachtest du, dass 100% sind?
Also nochmal einfacher. Wenn ich eine Bildschirmhöhe von 768px zur verfügung habe, der obere Teil genau 300px einnimmt, dann dachte ich eigentlich das die 100% Angabe dann 468px einnimmt.
Mit dem Denken ist das so eine Sache ;).
So ist es aber so, das der obere Teil 300px einnimmt, und der untere Teil trotzdem 768px, und insgesamt die Seite dann 1068px hoch ist.
Ja toll, nicht? Genau wie du es per CSS angegeben hast!
Hat jemand eine Idee oder einen Ansatz? Das wäre super, denn ich bin echt schon Stunden damit beschäftigt eine gesheit Lösung zu finden.
Also entweder, du wartest darauf, dass die Browser irgendwann die CSS Calc() Eigenschaft umsetzen, oder du überlässt es schlicht und ergreifend dem Inhalt, wie hoch ein Element werden muss/ soll. (Du könntest natürlich auch noch irgendwelche JS Verenkungen anstellen.)
Gruß Gunther
-
Hi!
und dann haben das Element A und B z.B. die Heights: 100px und 200px. Wie mache ich das jetzt gescheit wenn ich Element C eine Höhe von 100% geben will. Also Element C soll die komplette Höhe der Seite von X=300 bis ganz unten einnehmen.
Versuch doch mal, C absolut zu positionieren mit top:300px und bottom:0. Dann musst Du die Angabe zu height für C natürlich weglassen.
Also nochmal einfacher. Wenn ich eine Bildschirmhöhe von 768px zur verfügung habe, der obere Teil genau 300px einnimmt, dann dachte ich eigentlich das die 100% Angabe dann 468px einnimmt.
Die Höhenangabe bezieht sich auf das Elternelement, in diesem Fall vermutlich body.
Mit dem Denken ist das so eine Sache ;).
Kann aber manchmal hilfreich sein ;))))
Hoffe, helfen gekonnt zu haben,
Grüße
-
Hi!
und dann haben das Element A und B z.B. die Heights: 100px und 200px. Wie mache ich das jetzt gescheit wenn ich Element C eine Höhe von 100% geben will. Also Element C soll die komplette Höhe der Seite von X=300 bis ganz unten einnehmen.
Versuch doch mal, C absolut zu positionieren mit top:300px und bottom:0. Dann musst Du die Angabe zu height für C natürlich weglassen.
Und du musst einen anderen Browser als einen IE verwenden.
U.a. http://forum.de.selfhtml.org/archiv/2006/8/t135534/Ansonsten wäre die Variante mit dieser Art der absoluten Positionierung natürlich eine Möglichkeit, von der ich aufgrund aller damit verbundenen Nachteile jedoch dringend Abstand nehmen würde.
Also nochmal einfacher. Wenn ich eine Bildschirmhöhe von 768px zur verfügung habe, der obere Teil genau 300px einnimmt, dann dachte ich eigentlich das die 100% Angabe dann 468px einnimmt.
Die Höhenangabe bezieht sich auf das Elternelement, in diesem Fall vermutlich body.
Zitat aus der CSS 2 Spec:
"<percentage>
Gibt eine prozentuale Höhe an. Der Prozentwert wird relativ zur Höhe des umschließenden Blocks der erzeugten Box berechnet. Wird die Höhe des umschließenden Blocks nicht explizit angegeben (das heißt, ist sie demnach von der Inhaltshöhe abhängig), wird der Wert als 'auto' interpretiert."Mit dem Denken ist das so eine Sache ;).
Kann aber manchmal hilfreich sein ;))))Soll vorkommen ... ;)
Hoffe, helfen gekonnt zu haben,
Hoffe, geholfen haben zu können.
Gruß Gunther
-
Nochmal Hi!
Und du musst einen anderen Browser als einen IE verwenden.
Ach ja, da war doch noch was, schade ...
Kann man vielleicht für c
position:absolute; top:0; padding-top:300px; height:100% (unter der Vorraussetzung, dass body und html auch 100% haben, natürlich); -moz-box-sizing:border-box
angeben? Nicht wirklich elegant, zugegeben, aber zumindest im IE und FF sollte das doch eigentlich funktionieren, oder?Hoffe, helfen gekonnt zu haben,
Hoffe, geholfen haben zu können.Hoffe, gekonnt korrigiert zu werden ;)
-
Auch nochmal Hi!
Kann man vielleicht für c
position:absolute; top:0; padding-top:300px; height:100% (unter der Vorraussetzung, dass body und html auch 100% haben, natürlich); -moz-box-sizing:border-box
angeben? Nicht wirklich elegant, zugegeben, aber zumindest im IE und FF sollte das doch eigentlich funktionieren, oder?Vielleicht beantwortet der nachfolgende Artikel deine Frage!?
Gruß Gunther
-
-
-
-
-
Hi,
und dann haben das Element A und B z.B. die Heights: 100px und 200px. Wie mache ich das jetzt gescheit wenn ich Element C eine Höhe von 100% geben will. Also Element C soll die komplette Höhe der Seite von X=300 bis ganz unten einnehmen.
gar nicht. Weil Du eben 100% - 300px nicht angeben kannst.
Aber meist handelt es sich ja nur um eine rein optische Abgrenzung, die Du über ein umschließendes DIV und geeignete Hintergrundangaben erreichen kannst.
Die Alternative wären %-Werte für alle DIVS oder eine Layouttabelle.freundliche Grüße
Ingo -
hi!
jetzt mal abgesehen von verschiedenen browsern, die sowieso machen was sie wollen: wärs nicht einfacher die 100%-höhe um die beiden anderen drumherum zu setzen? einfach mal so drauflos spekuliert?
<div style="height:100%;"> <div style="height:100px;"> </div> <div style="height:200px%;"> </div> </div>also nur mal so grundliegend - ob dass dann auch so interpretiert wird ist ne andere sache ;)
greets!
-
Hi!
jetzt mal abgesehen von verschiedenen browsern, die sowieso machen was sie wollen: wärs nicht einfacher die 100%-höhe um die beiden anderen drumherum zu setzen? einfach mal so drauflos spekuliert?
<div style="height:100%;">
<div style="height:100px;">
</div><div style="height:200px%;">
</div></div>
Dann hast du aber eben nicht mehr 3 DIVs untereinander, wie der OP es wollte, sondern ineinander verschachtelte. Das ist ja das, was Ingo auch schon erwähnt hat. Gruß Gunther-
Dann hast du aber eben nicht mehr 3 DIVs untereinander, wie der OP es wollte, sondern ineinander verschachtelte. Das ist ja das, was Ingo auch schon erwähnt hat.
...man sollte eben erst lesen -.-
da hast du natürlich recht. ich steh hin und wieder vor dem selben problem - und ich bin ein fauler, bequemer mensch was dann dazu führt dass ich auf tabellen zurückgreife - die tun wenigstens was ich will ;)
-
-