0

Given the following simple html page body

...
<body>
  <div>
    ...
  </div>
  <div>
    ...
  </div>
  <div style="height:***">
    <svg width="100%" height="100%">
      ...
    </svg>
  </div>
</body>

let's focus on the last div, which contains an svg element.

If the browser window is resized horizontally, the div width changes automatically with the new size. As a consequence, the svg width follows and the contained drawing scales accordingly. This without any special stilying or javascript responsive code.

If the browser window is resized vertically, on the other hand, neither the div nor the svg height change.

1 - What .css needs to be applied to the div to obtain the same effect vertically?

In other words, the div should resize to an height which exactly (no y overflow) fills the current remaining visible space in the browser window.

As a consequence, the svg would rescale vertically accordingly, which is the desired final effect.

If css is not enough to obtain this effect and javascript is absolutely necessary,

2 - Which event should be hooked, on which element, and what code is needed

to calculate the exact height to assign the the div to have no y overflows (considering previous elements, borders, paddings, margins etc.)?

Franco Tiveron
  • 2,364
  • 18
  • 34
  • Containers don't change height based on the browser's height by default, they flow into whatever size is necessary to accommodate the content. I suggest you read about [units](https://www.w3schools.com/cssref/css_units.asp), specifically using `vh` to do what you intend. – filipe Aug 27 '22 at 07:18
  • Give a height and width to your parent container. – Choose Goose Aug 27 '22 at 07:28
  • 1
    use vh for height and vw for width of the svg element – enxaneta Aug 27 '22 at 09:27

1 Answers1

0

You need to use vh for vertical rescale and vw for horizontal rescale.

<body>
<div>
...
</div>
<div>
...
 </div>
  <div style="height:10vh; width:10vw;" >
    <svg width="100%" height="100%">
      ...
    </svg>
   </div>
</body>
iam-raghu-aditya
  • 1
  • 2