Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set a css property to screen width using css

Tags:

html

css

Is there any way to set a css property to the screen width?

What I want to achieve is something close to this:

div{width: screen width; }

Or

.divTest{width: screen width; }

Edit 1: I would like to use the class to exactly size other elements with the current width as i choose with css.

Edit 2: I don't believe it can be done without scripting of some sort but what do I know.

Edit 3: Final Thoughts A post about the widow re-sizing script using JavaScript is here in Alex V's answer. You'd just add in the script flavor you want. In my case it'd be setting a class property. However I believe setting visual attributes with JavaScript can be bad practice/undesirable in certain uses.

like image 727
JSG Avatar asked Dec 24 '22 06:12

JSG


1 Answers

Try width: 100vw; or as the above comment suggests, width: 100%;.

You may also want to set the meta tag in the HTML if it applies:

<meta name="viewport" content="width=device-width, initial-scale=1">

Edit:

If the <div> isn't fitting 100% of the screen width, perhaps you need to have the default margin/padding reset:

*, :before, :after {
    box-sizing: border-box; // habit
    margin: 0;
    padding: 0;
}
like image 160
timolawl Avatar answered Jan 15 '23 17:01

timolawl