Rechnen HTML-Engines den Scrollbalken mit zur Weite des Dokuments?

FranzvonAssisi · 27. Juli 2015

Hey,

offenbar zählen die HTML-Render-Engines den Scrollbalken mit zum Bereich des Dokuments, oder? Ich mache mal ein Beispiel:

HTML:

<style>
div{ width: 1090px;
     background-color: #000;
}

@media(max-width: 1090px){
       div{width: 100% }
}
</style>

<div></div>

So. wenn ich das jetzt im Browser öffne (denkt euch <head> usw. dazu), wird ab <1096px und >1090px Breite ein Scrollbalken sichtbar, da 6px dem Scrollbalken gehören.

Wisst ihr, ob meine Vermutung richtig ist und wenn ja, wieso haben die das so blöd gelöst?

Lg, Franz

BlubbsDE · 27. Juli 2015

Nein, das macht kein Browser. Der Scrollbalken kommt immer dann, wenn eben das Fenster zu klein für den Inhalt ist.

FranzvonAssisi · 27. Juli 2015

http://jsfiddle.net/ggyLp4yb/
Dann verstehe ich das nicht.

Edit: Hier, probiers mal in einer HTML-Datei: http://pastebin.com/YH0PTLBc
Wenn man den Scrollbalken nicht mehr erzwingt, funktioniert es übrigens prima.

MoOderSo · 27. Juli 2015

Die Scrollbar muss mit eingerechnet werden in der media width.
http://www.w3.org/TR/css3-mediaqueries/#width

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

nico525 · 28. Juli 2015

Hab ich so noch nie betrachtet, aber das ist wirklich ein interessantes Ergebnis.
Im übrigen solltest du dich nicht darauf verlassen, dass der Scrollbalken immer 6px ist. Bei iOS und - je nach Einstellung - OS X wird der Balken über den Content gelegt.

Ich würde das in dem obigen Bsp übrigens ohne media query machen...

HTML:

<style>
div {
    width: 100%;
    max-width: 1090px;
}
</style>

Suche

Rechnen HTML-Engines den Scrollbalken mit zur Weite des Dokuments?

FranzvonAssisi

Admiral

BlubbsDE

Fleet Admiral

FranzvonAssisi

Admiral

MoOderSo

Gast

nico525

Ensign

Ähnliche Themen