Menu
width: 100vw;/* 100% of viewport width */
height: 100vh;/* 100% of viewport height*/
This CSS should give me the exact(100%) dimensions of the viewport. But it is apparently too large because it's causing an overflow on the page.
It is not padding, margin, or outline because I removed all of that.
note It also seems that it only "grows" bigger than the projected dimensions when I add two divs with these dimensions. (but it's always the case in jsfiddle)
http://jsfiddle.net/0psu7ys6/
Should I just consider it a bug and write a work around? Or am I missing something?
991
VW is useful for creating full width elements (100%) that fill up the entire viewport's width. Of course, you can use any percentage of the viewport's width to achieve other goals, such as 50% for half the width, etc. VH is useful for creating full height elements (100%) that fill up the entire viewport's height.
vw and vh are a percentage of the window width and height, respectively: 100vw is 100% of the width, 80vw is 80%, etc. One thing you should be aware of is that mobile Safari still renders vh incorrectly, and anything but the most recent Android browser can't handle either unit.
Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
vh is the viewport height. the number you attach is a percentage so height: 100vh will be the 100% height of whatever the device is. % is the portion of the container the element is held inside of so height: 100% will be the height of the container.
The viewport measurements are accurate. The problem lies in the fact that your div is an inline-block. The browser renders your inline-block element on a line box. The whitespace underneath your div comes from the baseline of this line box; it is the area where typographic descenders should go. This additional space, combined with your div, is what results in overflow.
If you remove the display: inline-block declaration so that your div is rendered as a block-level element, the scrollbars will go away and the div will fit the viewport exactly.
If you need this element to be an inline-block for some reason, setting vertical-align: top (or bottom or middle) seems to fix it.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
