how to get width of screen and add some value to it in css

Question

I want to get the screen size and add 253px to it
Or something like this in css

width: (100% + 253px)

how can I make this happen?

`width: (100vw + 253px)`, but if you add `body { margin: 0 }`, then your rule `width: (100% + 253px)` works like `width: (100vw + 253px)` — s.kuznetsov, Dec 08 '20 at 08:13
.container { min-height: calc("~100vh - 150px"); } [link](https://stackoverflow.com/questions/27256849/is-it-possible-to-use-vh-minus-pixels-in-a-css-calc) — Aalexander, Dec 08 '20 at 08:15
@MiladJurablu, you are asking about the `width`, but agree with the `min-height`. How can it be? — s.kuznetsov, Dec 08 '20 at 08:32

score 1 · Answer 1 · answered Dec 08 '20 at 08:20

1

tnx to my freind Alenx

.container { min-height: calc("~100vh - 150px"); }

answered Dec 08 '20 at 08:20

milad

79
10

score 1 · Answer 2 · answered Dec 08 '20 at 08:29

1

You can set width and height relative to the viewport. with vh, vw

There you can add an offset in px with the following line of code.

.container { min-height: calc("~100vh - 150px"); }

answered Dec 08 '20 at 08:29

Aalexander

4,987
3
11
34

score 0 · Answer 3 · answered Dec 08 '20 at 09:28

For the CSS to measure a percent of the window screen and add to or cut from that amount in a pixel scale, you'll need to hit ElementSelector { width: calc(100% - 253px) } in your CSS (without "calc" function, that math calculation can't be computed since they're of different scales).

how to get width of screen and add some value to it in css

3 Answers3