Rolf B: SVGs mit 100% Höhe - merkwürdiger Scrollbar

Beitrag lesen

Hallo alle,

es hat mich gerade eine Stunde gekostet, weil ich erstmal versucht habe, das Problem zu verstehen. Nachdem ich dann doch gegoogelt habe und bei stackoverflow fündig wurde, dachte ich, ich schreib's nicht nur ins Wiki, sondern auch eine Notiz hierhin:

Ich wollte ein seitenfüllendes SVG malen. So:

<body>
<svg viewbox='...'>
</svg>
</body>
* { margin:0; padding: 0; }
body { height: 100vh }
svg { width: 100%; height: 100%; }

Ich habe mein seitenfüllendes SVG bekommen, und als Bonus einen lästigen kleinen Streifen untendrunter, der dem Browser eine vertikale Scrollbar entlockte. Die Scrollbar geht weg, wenn man das SVG ein paar Pixel niedriger macht. Aber dann wird der Streifen sichtbar und der Hintergrund erscheint.

Der Grund: svg ist kein block- sondern ein inline-Element. Damit gibt's Zeilenflow und kein Block-Layout. Die Lösung ist dann klar: man styled das svg mit display:block !!!11!elf!

Rolf

--
sumpsi - posui - clusi