Css: Are View Height (Vh) and View Width (Vw) Units Widely Supported

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

The statistic is clearly and it is a fair assessment, in my point of view.

I think the decision has to be made by you. If you want to future-proof your website using the latest greatest technology, but are aware that there are currently some downfalls, then great, go for it.

If you are not prepared to invest a little more into your online presence, then stick to the old way, which is in no means wrong.

EDIT: When I want to create a responsive design I start developing for Mobile Devices first and then create the Desktop Version, to ensure that my viewports all work correctly, since the Mobile support is lacking at some points(especially vmax). BUT about this you could ask 50 guys and the chances that they all will say something else are pretty good.

How to set fixed base to calculate vh unit in css on mobile?

Finally I used jQuery to fix vh units, as it was mentioned in source 2 and there.

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

CSS: Is there a Unit that the Equivalent to vh + vw?

Demo of calc( n * ( 1vh + 1vw ) ) proposed by Dai.

*   {   box-sizing: border-box;}body{  margin:0%;}.div_1{  position:relative;  width:100%;  Height:20%;  background-color:#000000;  border-top:.4vh solid #ff7400;  border-left:.4vh solid #ff7400;  border-right:.4vh solid #ff7400;  border-bottom:.2vh solid #ff7400;}#div_1_a{  height:100%;  display: flex;  align-items: center;  justify-content: center;}#h1_1_a{  line-height:100%;  height:60%;  color:#ff7400;  font-size: calc( 6 * ( 1vh + 1vw ) );  white-space: nowrap}

<html lang="en">  <head>     <link rel="stylesheet" href="halloweenEvent1.css" type="text/css"/>    <meta charset="UTF-8"/>    <meta name="description" content="A Halloween Event Website"/>    <meta name="keywords" content="Brad,Website,Personal,Information,Halloween"/>    <meta name="author" content="Bradley William Elko"/>    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Halloween Event (Home)</title>  </head>  <body>    <div class="div_1">      <div id="div_1_a">        <h1 id="h1_1_a">Halloween Website</h1>      </div>    </div>  </body></html>

Alternative to 100vh for fixed positioned element?

Viewport units like vh and vw are well supported; Use them.

The other alternative is to set the position to fixed and set bottom: 0. height assumes the height of the parent element and doesn't take position, margin or padding into account; bottom assumes an offset from the bottom of the parent container. Same goes for width vs right. Remember, you should not use height and bottom at the same time or they'll override each other.

Here is a working example.

.fullscreen {  position: fixed;  top: 50px;  left: 0;  right: 0;  bottom: 0;    background: cornflowerblue;}
.body {  height: 2000px;}

<div class="fullscreen">this will be fullscreen with a top offset</div>
<div class="body">  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed arcu quis dui congue pulvinar. Ut scelerisque suscipit ipsum, in elementum velit aliquet sit amet. Nulla tempus iaculis vestibulum. Mauris eu odio id dui consectetur blandit facilisis nec metus. Nullam laoreet risus et aliquam viverra. Sed eu imperdiet metus. Vivamus at dui turpis.</p></div>

displaying div tag a percentage height of the window using viewport height (vh) in Wordpress

Check the code in TEXT VIEW of content editor.
Wordpress content editor generates some tags when you paste content in it.
Paste the same using TEXT VIEW and make sure no other text is there. It'll work fine.

In your current case extra <code>..</code> and <p>...</p> tags are being generated.

sass: calculation between vh and px

Try using CSS calc. It's pretty widely supported.

.slideshow {
    height: calc( 100vh - 70px );
}

CSS: 200vw unit not working on mobile view

How about viewport tag? Hope it's help

<meta name="viewport" content="width=device-width, initial-scale=1">

Css: Are View Height (Vh) and View Width (Vw) Units Widely Supported