Einzelnen Beitrag anzeigen
  #15 (permalink)  
Alt 15.05.2019, 17:34
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Das zu erklären füllt ganze Kapitel in Büchern, damit ist der Beitrag in einem Forum schlicht überfordert.

Deshalb als Denkanstoß und Beginn der Einarbeitung.

In HTML und CSS hat die Einheit % (Prozent) ganz unterschiedliche Grundlagen. Und zwar häufig solche, die ohne Hintergrundwissen nicht erwartet werden. Siehe zum Beispiel:

Cascading Style Sheets { Grundlegendes : Prozentangaben in CSS }

Zudem sind viele %-Angaben nicht fest, heißt: Sie können keinen Raum schaffen. Das gilt speziell für height-Angaben. Das muss man schlicht lernen, ansonsten wird man immer wieder mit unerwarteten Größen und Abständen bei %-Angaben überrascht werden.

Um dem abzuhelfen wurden die Einheiten vw und vh eingeführt. Die verhalten sich leider wieder etwas anders als vergleichbare %-Angaben. Ein gedankliches Gleichsetzen von % mit vw oder vh führt deshalb in der Regel zu neuen Problemen.

Der große Vorteil ist aber, das vw und vh Größe und Platz schaffen können. Im Gegensatz zu % sind vw direkt einer Breite und vh direkt einer Höhe zugeordnet.

Deshalb ist

Zitat:
erhält man dann nicht eine Höhe von 48,5 % ?
und

Zitat:
hat man dann nicht eine breite von 66,8 %???
im CSS-Denken sachlich falsch. Bei %-Angaben muss die Grundlage angegeben werden.

Code:
height: calc(100vw * 0.485);
In diesem Beispiel hat der Container .sidebar eine Breite von 100% des ihn umgebenden Containers body. Das funktioniert. 100vw würden nicht funktionieren.

Die Höhe von .sidebar muss sich proportional zum Bild anpassen. Das geht nicht im %-Angaben, da die keine Höhe schaffen können. Rechnerisch wäre der Wert 0.5, da vw aber anders als % funktioniert bin ich durch ausprobieren auf 0.485 gekommen.

Code:
width: calc(100vh * 0.668);
Hier steht die Bildhöhe fest (100vh) und die Bildbreite muss angepasst werden. Da 100vh die sichtbare Bildhöhe ist kann der berechnete Wert fast direkt übernommen werden (800 / 1200).

Code:
 width: calc(100% - 100vh * 0.67 - 1rem);
Da .sidebar mit "position: fixed;" aus dem Dokumentenfluß genommen wurde, können andere Elemente darauf nicht mehr reagieren, also auch keinen Abstand halten.

Deshalb muss die Breite vom main-Element (.content) begrenzt werden. Also 100 % minus die Breite von .sidebar:

Code:
 width: calc(100% - 100vh * 0.67);
Allerdings hat .content noch einen Außenabstand von 0.5rem, der zu der Breite hinzugerechnet wird. Der muss deshalb zusätzlich abgezogen werden. Macht zweimal 0.5rem = 1rem. Deshalb

Code:
 width: calc(100% - 100vh * 0.67 - 1rem);
Mit Zitat antworten