Shrink div with calc and transform scale

Asked Jun 03 '20 at 22:36

Active Jun 03 '20 at 22:44

Viewed 502 times

I have a right side slide in menu. I want to shrink the main page content when the menu is visible. The menu is 320px wide.

https://jsfiddle.net/39d5cwo7/25/

Problem:

How can I scale the main content area down like this:

transform: scale( calc( calc(100vw - 320px) / 100vw ) );     /*  invalid  */

Here I attempt to take the full screen width and remove the menu width. Then turn this into a percentage by dividing by the full screen width, which is then the proper scale of the main content (units should be removed by the division...mathematically anyway).

Firefox and Chrome consider this invalid. I'd prefer to do this in css but if required how can this be done in javascript?

Things I've tried:

transform: scale(calc( calc(1920 - 320) / 1920 ));          /*  works but not responsive */
transform: scale(calc( calc(1920px - 320px) / 1920px ));    /*  invalid  */

asked Jun 03 '20 at 22:36

Stib

you cannot divide by a unit or use unit inside scale – Temani Afif Jun 03 '20 at 22:41
1

you are also overcomplicating an easy task. All you need to do is to add a margin equal to your fixed menu: https://jsfiddle.net/thoj1695/ – Temani Afif Jun 03 '20 at 22:46
Thanks for the info @TemaniAfif . I would prefer to use scale for aesthetic reasons, I have large images and text placed over those images. The margin change works but shifts things around in an unpleasing way. – Stib Jun 03 '20 at 22:53
1

you can simply do this then: https://jsfiddle.net/ojup0afg/ – Temani Afif Jun 03 '20 at 22:57
That's perfect. Thanks @TemaniAfif – Stib Jun 03 '20 at 23:01

Shrink div with calc and transform scale

0 Answers0