Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use screen.width inside calc (css)

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.

like image 648
Sefean Avatar asked Aug 09 '17 13:08

Sefean


People also ask

How do you screen width in CSS?

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.

How does the CALC () function work on values in CSS?

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.

How do you calculate height in CSS?

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.


2 Answers

100vw = 100% of viewport width

left:calc(250px + 100vw - 1024px)!important; 
like image 53
Ehsan Avatar answered Oct 09 '22 08:10

Ehsan


You can use vw units to size things in relation to viewport width, so try this:

left: calc(250px + 100vw - 1024px) !important; 
like image 36
jberglund Avatar answered Oct 09 '22 10:10

jberglund