nicht angemeldet
Differenz aus verschiedenen Maßen
0 
TS
0 0 
Der Martin
0 
Gunnar Bittersmann
0 
marctrix
Differenz aus verschiedenen Maßen
Hallo, ich bin ein Frischling im Umgang mit HTML/CSS etc. und bitte zu entschuldigen, dass die Erfahrenen jetzt womöglich schon die flache Hand in Richtung Stirn sausen lassen.
Problem: header und footer habe ich am oberen und unteren Bildschirmrand ge-"fixed" und ihnen Höhen in em zugeteilt. Der <div id="content"> (auch position:fixed;), in dem ich alle weiteren Inhalte ausrichten möchte, soll den Raum zwischen den beiden ausfüllen. Wenn ich nun aber einen % Wert nehme, dann ist dieser Container wegen des von der Bildschirmgröße unabhängigen footer/header zu klein oder zu groß. Da sich der Container selbst an der Fenstergröße orientiert.
Frage: Kann ich einen Mischwert bilden? z.B. height: 100%-4.7em;
...So wie es hier steht funktioniert es nicht...
Oder hat jemand eine andere schöne Idee?
-
Hallo und guten Tag,
Hallo, ich bin ein Frischling im Umgang mit HTML/CSS etc. und bitte zu entschuldigen, dass die Erfahrenen jetzt womöglich schon die flache Hand in Richtung Stirn sausen lassen.
Problem: header und footer habe ich am oberen und unteren Bildschirmrand ge-"fixed" und ihnen Höhen in em zugeteilt. Der <div id="content"> (auch position:fixed;), in dem ich alle weiteren Inhalte ausrichten möchte, soll den Raum zwischen den beiden ausfüllen. Wenn ich nun aber einen % Wert nehme, dann ist dieser Container wegen des von der Bildschirmgröße unabhängigen footer/header zu klein oder zu groß. Da sich der Container selbst an der Fenstergröße orientiert.
Frage: Kann ich einen Mischwert bilden? z.B. height: 100%-4.7em;
...So wie es hier steht funktioniert es nicht...
Oder hat jemand eine andere schöne Idee?
Guck mal bei "CSS Calc"
https://blog.selfhtml.org/2006/09/22/css3-calc-vs-box-sizing/
Grüße
TS -
Hallo
hat jemand eine andere schöne Idee?
Ja.
und ihnen Höhen in em zugeteilt
Das ist ein typischer Anfängerfehler. Die Höhe von Containern wird grundsätzlich von deren Inhalt bestimmt. Höhenangaben (height, min-height, max-height) sollten nur in Ausnahmefällen vorgegeben werden, wenn es keine anderen Lösungen gibt.
In deinem Fall sind Höhenangaben nicht erforderlich. Du solltest als nur den header und den footer oben und unten im Fenster fixieren.
Der <div id="content"> (auch position:fixed;)
Falsch. position weglassen.
Insgesamt bietet sich Flexbox als Lösung an.
Gruss
MrMurphy
-
Hi,
Hallo, ich bin ein Frischling im Umgang mit HTML/CSS etc. und bitte zu entschuldigen, dass die Erfahrenen jetzt womöglich schon die flache Hand in Richtung Stirn sausen lassen.
höchstens mit einem Tuch zum Schweißabwischen. ;-)
Problem: header und footer habe ich am oberen und unteren Bildschirmrand ge-"fixed" und ihnen Höhen in em zugeteilt.
Dir ist hoffentlich bewusst, dass das bei kleinen Bildschirmen bzw. Fenstergrößen problematisch werden kann. Dann nämlich, wenn zwiswchen header und footer nicht mehr viel Platz übrigbleibt.
Der <div id="content"> (auch position:fixed;), in dem ich alle weiteren Inhalte ausrichten möchte, soll den Raum zwischen den beiden ausfüllen.
Warum noch ein Container? Warum nicht direkt die Inhalte im body notieren? Gib dem html- und dem body-Element eine Höhe von 100%, und dem body oben und unten ein padding, exakt soviel wie header und footer hoch sind.
Frage: Kann ich einen Mischwert bilden? z.B. height: 100%-4.7em;
Das geht auch, calc() wurde ja schon genannt. Halte ich aber für überflüssig (siehe oben).
So long,
Martin--
Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
- Douglas Adams, The Hitchhiker's Guide To The Galaxy-
@@Der Martin
Problem: header und footer habe ich am oberen und unteren Bildschirmrand ge-"fixed" und ihnen Höhen in em zugeteilt.
Dir ist hoffentlich bewusst, dass das bei kleinen Bildschirmen bzw. Fenstergrößen problematisch werden kann. Dann nämlich, wenn zwiswchen header und footer nicht mehr viel Platz übrigbleibt.
Und nämlich, wenn die durch die kleinen Viewportbreiten der Inhalt mehr Zeilen beansprucht und nicht mehr in die festen Höhen von Header bzw. Footer reinpasst.
LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
@@Friedolin97
Der <div id="content">
möchte vermutlich gern ein
<main>-Element sein.LLAP 🖖
--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:| -
Hej Friedolin97,
Hallo, ich bin ein Frischling im Umgang mit HTML/CSS etc. und bitte zu entschuldigen, dass die Erfahrenen jetzt womöglich schon die flache Hand in Richtung Stirn sausen lassen.
Nein, das ist ein typischer Wunsch. Du stellste dir eine Webseite wie ein Stück Papier vor. Das macht keinen Sinn. Zu unterschiedlich sind die Bildschirme deiner Besucher und du würdest dich auch an Ketten legen, weil du nur winzig kurze Texte schreiben könntest. Klar, du könntest den mittleren Teil unter Header und Footer durchscrollen lassen. Aber Wozu?
Ich finde die Mode mit den festehenden headern unglücklich: ersten rauben dieauf großen Bildschirmen da Platz, wo selbst die Mangel haben: in der vertikalen (denn Bildschirme stehen normaölerweise im Querformat auf dem Schrebtisch) und auf kleinen Bildschirmen rauben sie Platz, obwohl der da generell Mangelware ist. Besser ein Link nach oben, um schnell zum Menü zurück zu komnen...
Marc