Breite eines DIVs, abhängig von der Höhe

dte · #1 (**permalink**) 27.02.2023, 12:19

Moin zusammen.

Ich versuche ein rechteckiges DIV zu erstellen, welches eine Höhe über die gesamte Seitenhöhe hat, jedoch die DIV-Breite nur die Hälfte von dem Höhenwert einnimmt. Also ein senkrechtes rechteckiges DIV, mittig auf der Seite.

Habe hierzu "calc" gefunden; jedoch wird hier

Code:

width: calc(height/2);

nicht erkannt. Vermute, weil "height" hier nicht als Variable zur Verfügung steht. Hat jemand eine Idee?

VG Dennis

dte · #2 (**permalink**) 27.02.2023, 13:54

Hab's gefunden. Es geht mit Viewport-Angaben: vh = viewport-height

Code:

#main {
    height: 100vh;
    width: 50vh;
}

top · #3 (**permalink**) 27.02.2023, 14:03

Moin,

es gibt als Einheit auch "vh" was für ViewHeiht steht.
Versuch es also mal mit:

Code:

width: 50vh;

Edit: Da war ich wohl zu langsam mit dem Tippen...

dte · #4 (**permalink**) 27.02.2023, 20:43

... und trotzdem Danke für Deine Bemühungen

cloned · #5 (**permalink**) 07.03.2023, 10:53

Man kann auch mit aspect-ratio: arbeiten wenn man ein bestimmtes Seitenverhältnis haben will.

aspect-ratio: 1 / 2 Zb. Oder 16 / 9 für 16:9 seitenverhältnis. Hier einfach die gewünschten Werte einfügen.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
100% Höhe von Divs klappt einfach nicht.	icecold	CSS	10	24.09.2010 10:25
Horizontaler Scroll mit DIVs und Breite über Javascript	kolarsky	Javascript & Ajax	1	16.08.2010 10:18
Probleme mit der Breite und Höhe nach Padding	BoFiaZ	CSS	1	12.03.2009 10:21
zwei divs nebeinander mit fester Breite und Höhe!!	grazioli	CSS	5	15.04.2008 22:27
Box variabel in Breite und Höhe	Black Fladder	CSS	2	12.04.2008 16:31