Is there a was of using screen.width
inside calc
? Something like this:
left: calc(250px + screen.width - 1024px)!important;
It is for a concrete situation where the @media(max-width: 1024px) won't work.
Use the CSS3 Viewport-percentage feature. Assuming you want the body width size to be a ratio of the browser's view port. I added a border so you can see the body resize as you change your browser width or height. I used a ratio of 90% of the view-port size.
CSS calc() is a function used for simple calculations to determine CSS property values right in CSS. The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values.
In this case we use jquery to calculate the height of content div area. But now using CSS we can set height without making header and footer height fixed or using jquery function. We use css property height: calc( 100% - div_height ); Here, Calc is a function.
100vw = 100% of viewport width
left:calc(250px + 100vw - 1024px)!important;
You can use vw
units to size things in relation to viewport width, so try this:
left: calc(250px + 100vw - 1024px) !important;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With