Benutzer-Werkzeuge

Webseiten-Werkzeuge


Writing /srv/www/htdocs/udo/singollo.de/linux.singollo.de/public_html/data/cache/9/971813c55773802885974d01a859b2cc.metadata failed
html:width100

CSS "width:100%" oder wie kriegt man 100% Breite hin?

Es gibt immer wieder die Frage, warum mein width:100% oder width=100% nicht das macht, was man erwartet. Entweder ragt das Element über ein anderes (Tipp: z-Index beachten, bzw. die Verschachtelung der div-Boxen prüfen) oder es werden unliebsame Scrollbalken angezeigt. Beim letzeren liegt es daran, dass nicht nur die Länge des Elements eine Rolle spielt, sondern auch die Angaben für margin, padding und border. Die Summe der Angaben ergibt die eigentliche Breite.

Gesamtbreite = ‘margin-left’
               + ‘border-left-width’
               + ‘padding-left’
               + ‘width’
               + ‘padding-right’
               + ‘border-right-width’
               + ‘margin-right’

Die Angabe width:auto alleine hilft hier wenig, denn es wird nur soviel aufgefüllt, wie das Element benötigt. Legt man allerdings beide Ränder auf 0, also jeweils an den linken und rechten Rand des Elternblocks, so wird der ganze Raum genutzt.

fullbox {
  width: auto;
  left:  0;
  right: 0;
}

Quelle: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

html/width100.txt · Zuletzt geändert: 17.01.2015 12:16 von udo