[Solved] I want 3 toolbars floating on each side and bottom of the screen and SVG should take rest of the space. How to model this?

by


In your CSS you could try using “calc()”.

As an example:

.my-svg-container {
    height: calc(100vh - 50px - 40px);
    width: calc(100vw - 20px - 10px);
}

Where: Top bar = 50px, Bottom bar = 40px, Left bar = 20px, and Right bar = 10px

Should note that this method will only work if you know the dimensions of each bar, otherwise you could just use “height: (a number)vh; width: (a number)vw;” where (a number) is a number between 0 – 100 and represents a percentage of the screen size (i.e. where 100vh is 100% screen height, 40vw is 40% screen width)

1

solved I want 3 toolbars floating on each side and bottom of the screen and SVG should take rest of the space. How to model this?