3

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.

Community
  • 1
  • 1
JSG
  • 161
  • 3
  • 10
  • `width:100%;` Does that help? – OldBunny2800 Apr 16 '16 at 01:48
  • 3
    if not that, then you can try `width: 100vw;` – timolawl Apr 16 '16 at 01:49
  • I want an exact number. Using @media screen I can set it to set sizes but, I want it exact if possible. – JSG Apr 16 '16 at 01:58
  • 1
    Are you saying you want to size other elements in proportion to the size of the div that hypothetically is equal to your screen width? In other words, you want all other elements to be proportional to screen width? – timolawl Apr 16 '16 at 02:24
  • Just ones i choose. I know how to do this in many languages, just not css. @media screen kind of made me wonder if there was a way in css. I'd bet the css rout would be faster if there is one. – JSG Apr 16 '16 at 02:46
  • You'll also want to make sure that whatever element for are making 100% width has `padding: 0px;` and `margin: 0px;`, that way you don't end up with an element that is larger than the screen and causes scroll bars. Just a tip! – Emmet Arries Apr 16 '16 at 03:19
  • 1
    So let's say for a child div, you want it to be width 50% and height 25% of the root div === screen dimensions. How does `width: 50vw;` and `height: 25vh` not work for you? These units are based on the screen viewport dimensions. – timolawl Apr 16 '16 at 03:38

3 Answers3

4

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;
}
Community
  • 1
  • 1
timolawl
  • 4,934
  • 9
  • 28
  • 1
    You guys are very correct. When something goes wrong, which it has, %100 doesn't work properly. This and a few other reasons I want to pass out the class or affect a whole tag that contains the exact current screen width in it. While doing it efficient ofcourse. – JSG Apr 16 '16 at 02:05
  • a div falls short of %100 but it is not the scope of the Q. – JSG Apr 16 '16 at 02:18
  • Did you get rid of the default margin/padding in your CSS? I'll edit my post to mention what I mean. – timolawl Apr 16 '16 at 02:19
  • Its beyond this question but yes i did. I do believe there is a bug with dynamic content but i need to do more research before i ask that one. – JSG Apr 16 '16 at 17:41
  • 1
    The 100vw did actually work where the 100% did not. It isn't the exact answer I was hoping for because it was so easy, but thank you because sometimes the best answers are! it does what I need it to. As it turns out it is not possible to set a class and property inside css. – JSG Apr 16 '16 at 18:13
3

Generally, a div, if it's set to display:block (which is the default in most browsers, I believe) will expand to the full width of it's parent. If you want it to be the full width of the screen, it really depends on the way your page is configured.

If the div is within another element that is only set to width:500px or any other size, the div will only be the width of the parent. But if div's parent is the html body, then it should be the full width of the screen.

I've been smacking my head around on html and css a lot lately, and the best tool I've found to figure out CSS issues like this is Chrome's developer tools. You can actually right-click and "inspect" the div you are looking at. Then you can try out all the different css settings you want and Chrome will show you in real-time what effect those things will have.

Jon Falkenstein
  • 135
  • 1
  • 9
  • ctrl+shift+c My fav ha ha ha! So just trying to set a class to an exact width of the screen mostly to troubleshoot however there are some good real world uses I could get out of a class like that. – JSG Apr 16 '16 at 02:17
2

Viewport units for CSS

vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height

Sizing div based on window width

Community
  • 1
  • 1
Pbk1303
  • 3,292
  • 2
  • 25
  • 43