Menu
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 looking for opinions from more experienced web developers than I.
EDIT: Thanks for the input everyone, I do want it to look good on mobile, so I guess I'll have to forgo vh.
863
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. Viewport Width (vw). This unit is based on the width of the viewport.
CSS Length Units vh and vw CSS3 introduced two units for representing size. vh , which stands for viewport height is relative to 1% of the viewport height. vw , which stands for viewport width is relative to 1% of the viewport width.
To use vh and vw values, just type “Nvh” or “Nvw” (where “N” represents the percentage of the viewport you'd like to cover) into any width or height field. So to cover 100% of the viewport, you'd set 100% for the width and 100vh for the height. To cover half of the viewport height, you'd set a height of 50vh.
use both CSS vh and jQuery, it's safer.
jQuery example:
var clientHeight = $( window ).height(); $('.element').css('height', clientHeight); and CSS:
.element {height: 100vh;} 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
