nicht angemeldet
SVGs mit 100% Höhe - merkwürdiger Scrollbar
Rolf B
SVGs mit 100% Höhe - merkwürdiger Scrollbar
Rolf B
JürgenB
Gunnar Bittersmann
MudGuardHallo 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
sumpsi - posui - clusi
-
Hallo Rolf,
display:tableginge auch.Gruß
Jürgen-
Hallo JürgenB,
hmm, ja, es gibt weitere display-Stile mit Block-Semantik. display:table beseitigt ebenfalls das vordergründige Symptom. Dafür schaffe ich vermutlich unterschwellig andere Probleme, weil mein svg Tabellen-Semantik bekommt, ohne eine zu sein. Würde ich also eher nicht tun wollen.
Rolf
--
sumpsi - posui - clusi-
Hallo Rolf,
die Display-Eigenschaften haben alle irgendwelche Nebenwirkungen, aber die Semantik wird durch eine CSS-Eigenschaft mMn nicht geändert.
Gruß
Jürgen-
@@JürgenB
die Display-Eigenschaften haben alle irgendwelche Nebenwirkungen, aber die Semantik wird durch eine CSS-Eigenschaft mMn nicht geändert.
Bei
display: noneschon. 😉LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
-
Hi,
Der Grund: svg ist kein block- sondern ein inline-Element.
Ist doch eigentlich logisch - img ist ein inline-Element, und das svg-Element ist im Grunde ja nur ein spezielles img-Element.
cu,
Andreas a/k/a MudGuard