Stack Overflow
Stack Overflow

Questions tagged [viewport-units]

The viewport units `vh`, `vw`, `vmin` and `vmax` are units of measurement relative to the browser viewport size, introduced in CSS3.

The viewport-percentage lengths, or viewport units, are units of measurement introduced in CSS3. Their length is relative to the viewport.

The units are:

  • vw: 1% of viewport width
  • vh: 1% of viewport height
  • vmin: 1vw or 1vh, whichever is smallest
  • vmax: 1vw or 1vh, whichever is largest
247 questions
614
votes
35 answers

CSS3 100vh not constant in mobile browser

I have a very odd issue... in every browser and mobile version I encountered this behavior: all the browsers have a top menu when you load the page (showing the address bar for example) which slide up when you start scrolling the page. 100vh…
Nereo Costacurta
  • 7,693
  • 4
  • 21
  • 27
239
votes
7 answers

CSS Units - What is the difference between vh/vw and %?

I just learned about a new and uncommon CSS unit. vh and vw measure the percentage of height and width of the viewport respectively. I looked at this question from Stack Overflow, but it made the units look even more similar. How does vw and vh unit…
Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
162
votes
16 answers

Is it possible to calculate the Viewport Width (vw) without scrollbar?

As mentioned in the title, is it possible to calculate the vw without the scrollbars in css only? For example, my screen has a width of 1920px. vw returns 1920px, great. But my actual body width is only something like 1903px. Is there a way for me…
Marten Zander
  • 2,385
  • 3
  • 17
  • 32
104
votes
5 answers

How to implement max-font-size?

I want to specify my font size using vw, as in font-size: 3vw; However, I also want to limit the font size to say 36px. How can I achieve the equivalent of max-font-size, which does not exist--is the only option to use media queries?
user663031
70
votes
4 answers

CSS Calc Viewport Units Workaround?

From what I've seen in other answers, CSS viewport units can't be used in calc() statements yet. What I would like to achieve is the following statement: height: calc(100vh - 75vw) Is there some workaround way I can achieve this using purely CSS…
golmschenk
  • 11,736
  • 20
  • 78
  • 137
41
votes
6 answers

CSS: Are view height (vh) and view width (vw) units widely supported?

I'm using 100vh to center a div vertically with line-height. This site puts support for vh and vw at around 70%, is that a fair assessment? Would you recommend using viewport units when building a site? I know this is a bit subjective, I'm just…
Ber
  • 695
  • 1
  • 11
  • 17
39
votes
7 answers

SASS: Incompatible units: 'vw' and 'px'

How to solve the incompatible units problem? @mixin square-size($size, $min: $size, $max: $size) { $clamp-size: min(max($size, $min), $max); width: $clamp-size; height: $clamp-size; } The input is: @include square-size(10vw, 40px,…
Domske
  • 4,795
  • 2
  • 20
  • 35
35
votes
9 answers

How to fix vh(viewport unit) css in mobile Safari?

I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like to make the same effect with or without vh please…
Alvaro
  • 506
  • 1
  • 6
  • 11
31
votes
4 answers

Are Flexbox and vh height units not compatible in IE11?

I'm trying to use a flexbox-based layout to get a sticky footer for my page. This works well in Chrome and Firefox, but in IE11 the footer sits just after my main content. In other words, the main content isn't stretched to fill all of the available…
Ritchie Allen
  • 311
  • 1
  • 3
  • 4
24
votes
4 answers

How to write css fallbacks for vh vw

Can anyone explain how fallbacks work in CSS? I am trying to set it up for vh and vw and clearly I am not getting it... Here is my attempted solution, which does not work. The height property is taken every time. CSS: -webkit-height:…
user3311351
  • 301
  • 1
  • 2
  • 9
22
votes
2 answers

How do I convert a height of an element given in vh to pixels?

I have the max-height of an element as 65vh. I need to convert it to pixels in my JavaScript to see whether an image can fit there or if I need to shrink/crop it. (am doing win8 App development). Will this work? 100 vh = screen.height therefore…
Sudharsanan
  • 567
  • 2
  • 6
  • 11
20
votes
2 answers

"vw" CSS units in calc in Chrome not working

The new vw (and vh, vmin and vmax) CSS units are quite useful, as is calc. Both work fine in Chrome (the latter prefixed as -webkit-calc), but for some reason I've found that calc property values including the v* units, such as width:…
user663031
19
votes
2 answers

min-height 100vh creates vertical scrollbar even though content is smaller than viewport

I'm applying min-height: 100vh; to a flexbox container and I get a vertical scrollbar when I use justify-content: space-around; I don't want to force the height, but I don't understand why the scrollbar is there since the contents have smaller…
George Katsanos
  • 13,524
  • 16
  • 62
  • 98
18
votes
1 answer

How to prevent vh-units from ignoring the scrollbar?

I am working on a page layout with a horizontal scrollbar. I have some panels with fixed widths in a horizontal order, which should all have the viewport height. I decided to test the vh unit to do that. .panel { height: 100vh; } This is working…
Afterlame
  • 1,188
  • 2
  • 13
  • 32
14
votes
1 answer

Vertically centering inside a div with vh

I'm currently trying to center an image inside a div that has it's dimensions set with vh. I tried using the display:table-cell; method which centered the image but began messing with the vw of other elements. I was wondering if there was another…
kduan
  • 639
  • 4
  • 11
  • 22
1
2 3
…
16 17