Menu
I'm trying to fill a document with a SVG image using the width="100%" and height="100%" properties, I have height="100%" in html and body tags too, and different colours for body(red) and svg(blue).
Result is a full height svg but with a scrollbar in the right, and a thin line of red(body) at the bottom.
¿How can I fill the document with the svg without the scrollbar? Thanks.
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG full page</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #ff0000;
}
</style>
</head>
<body>
<svg width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#0000ff"></rect>
</svg>
</body>
</html>
928
asked Oct 23 '25 04:10
Add the display: block; CSS property to the SVG element.
You can see a demo here: http://jsfiddle.net/VL6z3/
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
