CSS: 100% Breite minus fixe Anzahl von Pixeln
Frage von Compi | 09.03.2016 um 13:51
Ich habe eine DIV-Box in HTML, deren Breite sich einerseits nach dem Eltern-Element richten soll, andererseits aber nicht die komplette Breite (100%) einnehmen soll, sondern etwas weniger.
Ich bräuchte also eine CSS-Angabe wie "width: 100% - 50px", was natürlich so nicht geht. Mit 80% oder dergleichen kann ich hier leider nicht arbeiten, da der Abstand immer eine gleich bleibende feste Breite haben soll.
Gibt es da irgendeine Möglichkeit, das mit CSS zu lösen?
Ähnliche Themen
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
Website Performance: Javascript und CSS komprimiert ausliefern und Ladezeiten verkürzen
Tutorial | 0 Kommentare
jQuery: CSS Stylesheet Switcher
Tutorial | 1 Kommentar
Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache
Tipp | 2 Kommentare
CSS: calc(100%-50px) funktioniert nicht
Frage | 2 Antworten
Hintergrund einer Website verdunkeln (Gray Out Effekt)
Tutorial | 0 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 3 - Rechtecke und Kreise
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.
Genau dafür gibt es seit CSS3 die neue CSS-Funktion calc(). Damit kannst du Längenangaben mit einer Gleichung ausrechnen lassen.
In deinem Beispiel wäre das dann:
.meindiv { width: calc(100% - 50px); }Die neueren und aktuellen Browser sollten das alle verstehen.
Für die anderen älteren Browser könntest du zum Beispiel noch eine Fallback-Breite vor der calc-Breite definieren, zum Beispiel: .meindiv {width: 80%; width: calc(100% - 50px);}
Letztes Update am 31.10.2022 | Erstellt am 09.03.2016