13

Trying to make full screen frames using 100vw and 100vh on divs. I have 2 in this JSfiddle and as you can see there's extra space both on the bottom and on the right of each frame.

Is there a way of using vw and vh and having it fit perfectly without the extra space?

The css looks like this:

.f1 {
    width: 100vw;
    height: 100vh;
    background-color: blue;
}

.f2 {
    width: 100vw;
    height: 100vh;
    background-color: grey;
}

*Edit: It seems that making the width: 100% solves this, but is this solution appropriate? Does it break anything?

Madan Bhandari
  • 2,094
  • 2
  • 26
  • 46
ReotheNew
  • 127
  • 1
  • 1
  • 6
  • `as you can see ...` I don't see it in Chrome. – ralph.m Aug 15 '14 at 02:18
  • @ralph.m I updated the link. Does that help? The background was white before so maybe you didn't see. see how there's a scroll bar on the bottom? That means there's extra space to the right. – ReotheNew Aug 15 '14 at 02:23
  • 2
    Also not seeing the problem in Chrome. I suspect the addition of this code fixed it for you: `* { margin: 0; padding: 0; }` – Bryan Downing Aug 15 '14 at 02:34
  • @BryanDowning No that didn't fix it. It was there from the start. In the JSfiddle it's like that for me in what is likely the latest version of chrome. You're saying the result square doesn't have a scroll-bar at the bottom? If that's true then this is strange. On my end setting width to 100% fixed it, but I'm not sure if it's an appropriate fix. Does it break any rules? Is there something I should be aware of with regards to either using 100% or 100vh/vw? – ReotheNew Aug 15 '14 at 02:38
  • If you make each of your divs only `50vh` high, instead of a `100vh`, the problem disappears – because the _scrollbar_ disappears as well. http://dev.w3.org/csswg/css-values/#viewport-relative-lengths says, _“However, when the value of ‘overflow’ on the root element is ‘auto’, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.”_ – but I don’t know how to unify those two statements, as they seem to contradict each other to me … – CBroe Aug 15 '14 at 03:10
  • @CBroe Thanks for the info. I thought this would've been well tread ground in the world of CSS by now with a clear solution. – ReotheNew Aug 15 '14 at 04:22
  • @CBroe It appears that what was written above solves the issue. Adding overflow: auto causes the scrollbars not to factor into the calculation of the container's size, thus solving the problem. Thanks again. – ReotheNew Aug 15 '14 at 04:34

2 Answers2

7

Scrollbars are included in the vw and vh so the scroll will be added to allow you to see beyond viewport.

to solve this problem you can use

max-width :100%

Madan Bhandari
  • 2,094
  • 2
  • 26
  • 46
-1

This is happening because the body element itself has some margin. You apply margin: 0; in body element, this will work.

sattam bandyopadhyay
  • 15
  • 2