• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kann ich irgendwie 100vh-50px berechnen?

Tabula_Rasa

Mitglied
Hallo zusammen,

ich habe folgendes Problem:

Ich habe eine Sidebar, die über das ganze Bild gehen soll, deshalb 100vh. Das Problem ist nur, dass die Sidebar sich 50px nach unten verschoben ist. Wenn ich die Sidebar aktiviere, dann wird die scrollbar sichtbar, was vermieden werden soll. Könnt ihr mir helfen?

HTML:
<div class="sidebar">
    ...
</div>

CSS:
.sidebar {
    height: ? /* wie kann ich hier 100vh-50px richtig berechnen */
    background-color: black;
    width: 250px;
    overflow: hidden
}
 
Werbung:
Werbung:
Häufig kann man auf solche Berechnungen verzichten, wenn man Flex- oder Grid-Layout richtig einsetzt. Poste doch mal das gesamte Layout, damit man es sich im Zusammenhang ansehen kann und weiß, wo die 50px her kommen.
Ganz oben positioniert befindet sich ein Header mit der Höhe von 50px und Breite von 100% und darunter soll die Sidebar aufploppen und diese soll die ganze Viewport-Höhe einnehmen und 250px breit sein. Damit die Scrollbar nicht angezeigt wird, wenn ich die Sidebar öffne, muss ich die korrekte Höhe angeben (was 100vh-50px wären).
 
Werbung:
Werbung:
Ist ja nicht so dass das nicht rot markiert auf der von mir verlinkten Seite stehen würde …
Ich habe es ja mit calc schon ausprobiert und wusste dazu nicht, dass es an einem Fehler meinerseits liegt. Deshalb war ich nicht wirklich an der calc-Funktion interessiert. Etwas mehr Kontext hätte geholfen wie zum Beispiel, dass das Spacing von Relevanz ist, danke dennoch!
 
Werbung:
Zurück
Oben