Größenverhältnis mit CSS beibehalten

philx94

Moin Leute,

Ich möchte für ein Template auf der Linken Seite einen Balken erzeugen der mit position:fixed immer an der Stelle bleibt. Nun ist es aber so das ich den Balken aufteile. Auf dem Desktop sieht das auch soweit gut aus. Habe ich jetzt einen kleinen Viewport sieht gerade der untere Balken blöd aus. Die Breite und Höhe ist natürlich als Prozentwert definiert dadurch ist die Proportion beider Elemente gerade bei kleineren Bildschirmen blöd.

Gibt es eine Möglichkeit das optisch fast identisch hinzubekommen?

Code

.left-frame{
    position:fixed;
    width:5%;
    height:100%;
    left:0px;
    top:0px;
    background-color:color.$grey;
    margin-right:5%;
    display:flex;
    justify-content: center;
}


.left-frame:after{
    content:'';
    position:absolute;
    bottom:0px;
    height:10%;
    width:100%;
    background-color:color.$yellow;
}

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

philx94

Kleines Update: Ich habe eine Grafik für das bessere Verständnis angehängt.

b3317133

Ohne Link zur Seite wo man das ansehen kann, wird Dir vermutlich niemand helfen können, siehe auch Forenregeln Punkt II.

philx94

Zitat von b3317133

Ohne Link zur Seite wo man das ansehen kann, wird Dir vermutlich niemand helfen können, siehe auch Forenregeln Punkt II.

Ich habe mal einen Pen gemacht da sich die Seite noch auf einer lokalen Entwicklungsumgebung befindet.

https://codepen.io/philn94/pen/ZEMGoPL

meisterleise

Zitat von philx94

…sieht gerade der untere Balken blöd aus.

…was eine sehr subjektive Aussage ist. ;) (zumal niemand weiß, welchen Zweck der Balken und dessen Unterteilung haben soll). Du müsstest schon erläutern, was dir daran nicht gefällt, bzw. wie du stattdessen möchtest, dass es aussehen soll.

meisterleise

Achso, habe deinen Screenshot übersehen. Du möchtest also, dass der gelbe Bereich nicht allzu "platt" wird. Dann nimm doch einfach eine min-height: dazu?

SirEctor

Du könntest die width und auch die height jeweils anstatt mit % mit vw angeben. Also zum Test mal so versuchen:

Code

.left-frame {
  position: fixed;
  width: 5%;
  height: 100%;
  left: 0px;
  top: 0px;
  background-color: grey;
  margin-right: 5vw;
  display: flex;
  justify-content: center;
}


.left-frame:after {
  content: "";
  position: absolute;
  bottom: 0px;
  height: 5vw;
 
  width: 100%;
  background-color: yellow;
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Größenverhältnis mit CSS beibehalten

Jetzt mitmachen!