0

I am trying to make SVG "canvas" full width & height of the container, which is a div.

SVG is set in CSS to be 100% width and height. Container div is set to 100vw and 100vh width and height respectively. Margin: 0. Padding: 0. No borders. The SVG overflows, but when I set it to 99% height, it does not.

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        svg {
            width: 100%;
            height: 100%; /* overflows */
            /* height: 99%; does not overflow*/
        }

        div {
            background-color: aliceblue;
            width: 100vw;
            height: 100vh;
        }
<div id="chart-area">
    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="1" fill="yellow" />
    </svg>
    </div>
LS_
  • 6,763
  • 9
  • 52
  • 88
Peter Vajda
  • 37
  • 6

1 Answers1

1

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        svg {
            width: 100%;
            height: 100%; /* overflows */
            /* height: 99%; does not overflow*/
            display:block;
           /* margin-bottom:-5px;  will work also*/
        }

        div {
            background-color: aliceblue;
            width: 100vw;
            height: 100vh;
        }
<div id="chart-area">
    <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="1" fill="yellow" />
    </svg>
    </div>

if you add display block or 5px negative margin to the svg it'll work perfectly.

The explanation is that inline elements sit on the text baseline. The extra vertical space is for character descenders.

check this link for more info

becem
  • 116
  • 3