how to set svg height in html page in percent of screen

Question

I made a graph with a svg object in an HTML page which I would like to give the same height as the screen. I thought that I could do that by setting the style to height:100% which does not work. I tested it in in Chrome, IE11 or down.

I Read a lot on this topic but couldn't find a way that actually worked and gave the same height as the screenheight.

So, how to make an SVG object as big as the screen?

Here is an jsfiddle where I set the style to 100% height https://jsfiddle.net/gz3ywdcm/

here is my html code:

<svg xmlns="http://www.w3.org/2000/svg" style="margin: 2%; border: 1px solid black; border-image: none; width: 90%; height: 100%;">

    <circle fill="#1da856" cx="0%" cy="100%" r="3" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="91.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="91.6667%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="87.5%" x2="21.4617%" y2="91.6667%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="21.4617%" y2="87.5%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="79.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="79.1667%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="70.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="70.8333%" x2="32.2506%" y2="79.1667%" /><circle fill="#1da856" cx="66.9374%" cy="66.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="66.6667%" x2="32.2506%" y2="70.8333%" /><circle fill="#1da856" cx="66.9374%" cy="62.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="62.5%" x2="66.9374%" y2="66.6667%" /><circle fill="#1da856" cx="66.9374%" cy="58.3333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="58.3333%" x2="66.9374%" y2="62.5%" /><circle fill="#1da856" cx="69.4896%" cy="54.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="54.1667%" x2="66.9374%" y2="58.3333%" /><circle fill="#1da856" cx="69.4896%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="50%" x2="69.4896%" y2="54.1667%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="69.4896%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><text fill="#1da856" x="94.66%" y="50%">alice</text><circle fill="#319d7b" cx="4.11833%" cy="95.8333%" r="3" /><circle fill="#319d7b" cx="4.17633%" cy="91.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="91.6667%" x2="4.11833%" y2="95.8333%" /><circle fill="#319d7b" cx="4.17633%" cy="87.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="87.5%" x2="4.17633%" y2="91.6667%" /><circle fill="#319d7b" cx="6.43852%" cy="83.3333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="83.3333%" x2="4.17633%" y2="87.5%" /><circle fill="#319d7b" cx="6.43852%" cy="79.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="79.1667%" x2="6.43852%" y2="83.3333%" /><circle fill="#319d7b"cx="6.43852%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="75%" x2="6.43852%" y2="79.1667%" /><circle fill="#319d7b" cx="9.39675%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="75%" x2="6.43852%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="54.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="54.1667%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="45.8333%" x2="40.3712%" y2="54.1667%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="40.3712%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="41.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="41.6667%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="37.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="37.5%" x2="85.5568%" y2="41.6667%" /><circle fill="#319d7b" cx="98.2019%" cy="29.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="29.1667%" x2="85.5568%" y2="37.5%" /><circle fill="#319d7b" cx="98.2019%" cy="25%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="25%" x2="98.2019%" y2="29.1667%" /><circle fill="#319d7b" cx="98.2019%" cy="20.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="20.8333%" x2="98.2019%" y2="25%" /><circle fill="#319d7b" cx="99.0139%" cy="16.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="16.6667%" x2="98.2019%" y2="20.8333%" /><circle fill="#319d7b" cx="99.0139%" cy="12.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="12.5%" x2="99.0139%" y2="16.6667%" /><circle fill="#319d7b" cx="99.0139%" cy="4.16667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="4.16667%" x2="99.0139%" y2="12.5%" /><circle fill="#319d7b" cx="99.0719%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0719%" y1="0%" x2="99.0139%" y2="4.16667%" /><circle fill="#319d7b" cx="100%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="100%" y1="0%" x2="99.0719%" y2="0%" /><text fill="#319d7b" x="100%" y="0%">bob</text><text fill="black" x="-2%" y="2%">24</text><text fill="black" x="-2%" y="100%">0</text><text fill="black" x="98%" y="112%">02-03-17</text><text fill="black" x="0%" y="112%">02-03-17</text>

    </svg>

How could this be done? Am I missing some HTML or css style's or rules? Should I use Javascript to determine screenheight and set it from client side? Is it never going to work with an SVG object and should I use something else to make a graph?

score 0 · Answer 1 · answered Mar 17 '17 at 12:10

Try using viewheight,vh for setting the svg height to screen height and viewwidth,vw for the screen width.

<svg xmlns="http://www.w3.org/2000/svg" style="margin: 2%; border: 1px solid black; border-image: none; width: 90vw; height: 100vh;">

Here's the fiddle

https://jsfiddle.net/wroceofz/

score 0 · Answer 2 · answered Mar 17 '17 at 14:01

If you can put a wrapper around it you can use absolute positioning to achieve that effect. I usually prefer it over the vh / vw units.

<div style="position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;">
    <svg xmlns="http://www.w3.org/2000/svg" style="display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;">

    <circle fill="#1da856" cx="0%" cy="100%" r="3" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="0%" cy="100%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="0%" y1="100%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="0%" y2="100%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="95.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="95.8333%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="91.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="91.6667%" x2="21.4617%" y2="95.8333%" /><circle fill="#1da856" cx="21.4617%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="21.4617%" y1="87.5%" x2="21.4617%" y2="91.6667%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="21.4617%" y2="87.5%" /><circle fill="#1da856" cx="25.9281%" cy="87.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="25.9281%" y1="87.5%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="79.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="79.1667%" x2="25.9281%" y2="87.5%" /><circle fill="#1da856" cx="32.2506%" cy="70.8333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="32.2506%" y1="70.8333%" x2="32.2506%" y2="79.1667%" /><circle fill="#1da856" cx="66.9374%" cy="66.6667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="66.6667%" x2="32.2506%" y2="70.8333%" /><circle fill="#1da856" cx="66.9374%" cy="62.5%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="62.5%" x2="66.9374%" y2="66.6667%" /><circle fill="#1da856" cx="66.9374%" cy="58.3333%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="66.9374%" y1="58.3333%" x2="66.9374%" y2="62.5%" /><circle fill="#1da856" cx="69.4896%" cy="54.1667%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="54.1667%" x2="66.9374%" y2="58.3333%" /><circle fill="#1da856" cx="69.4896%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="69.4896%" y1="50%" x2="69.4896%" y2="54.1667%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="69.4896%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><circle fill="#1da856" cx="94.6636%" cy="50%" r="3" /><line style="stroke: #1da856; stroke-width: 2;" x1="94.6636%" y1="50%" x2="94.6636%" y2="50%" /><text fill="#1da856" x="94.66%" y="50%">alice</text><circle fill="#319d7b" cx="4.11833%" cy="95.8333%" r="3" /><circle fill="#319d7b" cx="4.17633%" cy="91.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="91.6667%" x2="4.11833%" y2="95.8333%" /><circle fill="#319d7b" cx="4.17633%" cy="87.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="4.17633%" y1="87.5%" x2="4.17633%" y2="91.6667%" /><circle fill="#319d7b" cx="6.43852%" cy="83.3333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="83.3333%" x2="4.17633%" y2="87.5%" /><circle fill="#319d7b" cx="6.43852%" cy="79.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="79.1667%" x2="6.43852%" y2="83.3333%" /><circle fill="#319d7b" cx="6.43852%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="6.43852%" y1="75%" x2="6.43852%" y2="79.1667%" /><circle fill="#319d7b" cx="9.39675%" cy="75%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="75%" x2="6.43852%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="75%" /><circle fill="#319d7b" cx="9.39675%" cy="70.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="70.8333%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="70.8333%" /><circle fill="#319d7b" cx="9.39675%" cy="66.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="66.6667%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="66.6667%" /><circle fill="#319d7b" cx="9.39675%" cy="62.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="9.39675%" y1="62.5%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="54.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="54.1667%" x2="9.39675%" y2="62.5%" /><circle fill="#319d7b" cx="40.3712%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="40.3712%" y1="45.8333%" x2="40.3712%" y2="54.1667%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="40.3712%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="43.7355%" cy="45.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="43.7355%" y1="45.8333%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="41.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="41.6667%" x2="43.7355%" y2="45.8333%" /><circle fill="#319d7b" cx="85.5568%" cy="37.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="85.5568%" y1="37.5%" x2="85.5568%" y2="41.6667%" /><circle fill="#319d7b" cx="98.2019%" cy="29.1667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="29.1667%" x2="85.5568%" y2="37.5%" /><circle fill="#319d7b" cx="98.2019%" cy="25%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="25%" x2="98.2019%" y2="29.1667%" /><circle fill="#319d7b" cx="98.2019%" cy="20.8333%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="98.2019%" y1="20.8333%" x2="98.2019%" y2="25%" /><circle fill="#319d7b" cx="99.0139%" cy="16.6667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="16.6667%" x2="98.2019%" y2="20.8333%" /><circle fill="#319d7b" cx="99.0139%" cy="12.5%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="12.5%" x2="99.0139%" y2="16.6667%" /><circle fill="#319d7b" cx="99.0139%" cy="4.16667%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0139%" y1="4.16667%" x2="99.0139%" y2="12.5%" /><circle fill="#319d7b" cx="99.0719%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="99.0719%" y1="0%" x2="99.0139%" y2="4.16667%" /><circle fill="#319d7b" cx="100%" cy="0%" r="3" /><line style="stroke: #319d7b; stroke-width: 2;" x1="100%" y1="0%" x2="99.0719%" y2="0%" /><text fill="#319d7b" x="100%" y="0%">bob</text><text fill="black" x="-2%" y="2%">24</text><text fill="black" x="-2%" y="100%">0</text><text fill="black" x="98%" y="112%">02-03-17</text><text fill="black" x="0%" y="112%">02-03-17</text>

    </svg>
</div>

JS Fiddle: https://jsfiddle.net/n057d20n/

could you tell me why you prefer the wrapper over the vh and vw units? — Jos Luijten, Mar 17 '17 at 16:10
They're listed as "partial support" for old IE versions and aren't supported at all in IE8 and previous. With vh/vw you will also run into the issue of incorrect sizing if you decide to put any sort of navigation bar up (which is common). Source: http://caniuse.com/#search=vh — EmilyH, Mar 17 '17 at 16:56

how to set svg height in html page in percent of screen

2 Answers2