SVG 100% document height don't work

Posted by whizzo on Stack Overflow See other posts from Stack Overflow or by whizzo
Published on 2014-06-05T21:22:26Z Indexed on 2014/06/05 21:24 UTC
Read the original article Hit count: 160

Filed under:
|
|

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>

© Stack Overflow or respective owner

Related posts about html

Related posts about css