css - Layout using vh does not scale with zoom

Question

I've tried to create a login form using ONLY vh sizes. Doing this, in the hopes that the form, in all, would scale accordingly to the viewport.

It doesn't! For some reason zooming in, creates a blank space that keeps getting bigger the more you zoom, between the input fields and the text below.

http://jsfiddle.net/TnY3L/

The fiddle isn't very well made, just copied it from my project. But you can see what's wrong - and that's what counts.

Anyone have any idea as to how I were to go about fixing this?

<span id="loginform">
    <input type="text" name="login" class="LFORM" placeholder="USERNAME" />
    <input type="password" name="password" class="LFORM" placeholder="PASSWORD" />
    <button id="LB" type="button" style="font-size: 1.4vh;">OK!</button><br />
    <a href="" id="CALINK" style="font-size:1.4vh;">Create account</a>
    <a href="" id="FLLINK" style="font-size:1.4vh;">Forgot login?</a>
</span>

::-webkit-input-placeholder {
     font-size: 1.4vh;
}
#loginform {
     float: right;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     right: 1.5vh;
}
#CALINK {
     float:left;
     font-family:my_fat_font;
}
#FLLINK {
     float:right;
     font-family:my_fat_font;
}
#LB {
     border-radius: 0.4vh;
     font-family: my_fat_font;
     color: #ffffff;
     background: #ff9f2d;
     padding: 0.2vh 0.8vh 0.2vh 0.8vh;
     text-decoration: none;
     border: none;
     height: 2vh;
     margin-left: .5vh;
     margin-right: 0px;
     border: 0;
}
#LB:hover {
     background: #3e4188;
     text-decoration: none;
} 
.LFORM {
     width: 10vh;
     height: 1.8vh;
     border-radius: .3vh;
     border: none;
     padding-left: .6vh;
}
[placeholder]:focus::-webkit-input-placeholder {
     color: transparent;
}
#loginform a:hover {
     color: #ff9f2d;
     text-decoration:underline;  
}
#loginform a {
     color: #ff9f2d;
     text-decoration: none;
}

Answer 1

The vh and vh units are a measurement relative to the viewport size. 1vh is 1% of the current viewport height, so 100vh is always 100% height. No matter how much you zoom in and out, the viewport is still the same size.

When you zoom in, you scale up the entire document (but not the viewport). It's logical that the space between elements increases as you zoom in the page, if that space is not defined in viewport units as well. Because the other elements don't increase it takes the document out of proportions.

If you want to create elements that scale as you zoom in, try using the rem unit. This is relative to the body's font size, so as you zoom the page in every value expressed in rem will scale accordingly.