title: Why Wont vh Work In Chrome, but It Works In Internet Explorer
body: <p>So, I am using <code>vh</code>, and, to my knowledge, it is <code>1 percent</code> the view height of the page. It should work like percentages, but for borders and possibly other things. In Chrome, though, it wont work and leaves white space at the bottom of the Web page. Here is what I am using:</p>
  
  <pre><code>div /*It most be any element I'm just using div for an example*/
  {
      border:.5vh solid red;
  }
  </code></pre>
  
  <p>I am asking this because Chrome (being the frustrating piece of work it is) doesn't convert <code>.1vh to .1%</code> like like internet explorer does and I'm left with white space at the bottom. Here is what I'm working on:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;!--
      Assignment: Personal Website
      Date:  10/4/16
      Name:  Bradley Elko
      --&gt;
      &lt;title&gt;Bradley's Website (Me)&lt;/title&gt;
      &lt;link rel="stylesheet" href="personalWeb1.css"&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;meta name="description" content="My personal website"/&gt;
      &lt;meta name="keywords" content="Brad,Website,Personal,Information"/&gt;
      &lt;meta name="author" content="Bradley William Elko"/&gt;
      &lt;link rel="stylesheet" href="personalWeb1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="div01"&gt;
          &lt;h1 class="h101"&gt;&lt;a class="a00p5" href="personalWeb1.html" style="text-decoration:none"&gt;Bradley's Website&lt;/a&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="div02"&gt;
          &lt;h2 class="h201"&gt;
              &lt;a class="a01" href="personalWeb2.html" style="text-decoration:none"&gt;My Band&lt;/a&gt;
              &lt;a class="a01" href="personalWeb3.html" style="text-decoration:none"&gt;My Ideas&lt;/a&gt;
          &lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="div03"&gt;
          &lt;h2 class="h202"&gt;About Me&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="div04"&gt;
          &lt;div class="div05"&gt;
              &lt;p&gt;Date: 10/4/2016 (Latest Update)&lt;/p&gt;
              &lt;blockquote&gt;
                  Summary:
                  &lt;br/&gt;
                  &lt;br/&gt;
                  Welcome to my personal website! I am Bradley William Elko, and I am from Brunswick Ohio. I am currently attending MCCC (Medina County Carrer Center). I am taking SEWD1 (a coding class at MCCC). I always had an interest in coding. I am glad to be making my own personal website!
              &lt;/blockquote&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>a.a00p5
  {
      color:#950f0f;
      padding-left:1.9px;
  }
  a.a00p5:hover
  {
      color:red;
  }
  a.a00p5:active                                                                                                                                    
  {
      color:#ffffff;
      background-color:#B6B2AE;
  }
  a.a01
  {
      color:#950f0f;
      border-left:.3vh solid #950f0f;
      border-right:.3vh solid #950f0f;
      margin-left:1%;
      margin-right:1%;
  }
  a.a02,a.a03,a.a04
  {
      color:#ffffff;
  }
  a.a02:hover,a.a02:active
  {
      color:#3b5998;
  }
  a.a03:hover,a.a03:active
  {
      color:#00aced;
  }
  a.a04:hover,a.a04:active
  {
      color:#bb0000;
  }
  .address01
  {
      text-align:center;
  }
  body{
      overflow:hidden;
      margin:0px;
  }
  div.div01 
  {
      position:relative;
      text-align:center;
      height:14.3%;
      width:100%;
      font-family:Arial, Helvetica, sans-serif;
      background-color:#73778c;
      border-top:.4vh solid #950f0f;
  }
  div.div02
  {
      border-top:.3vh solid #950f0f;
      border-bottom:.3vh solid #950f0f;
      position:relative;
      height:5%;
      width:100%;
      background-color:#73778c;
      text-align:center;
  }
  div.div03
  {
      position:relative;
      background-color:#73778c;
      height:10%;
      border-bottom:.3vh solid #950f0f;
  }
  div.div04
  {
      position:relative;
      height:69%;
      width:100%;
      background-color:#73778c;
      border-bottom:.4vh solid #950f0f;
  }
  div.div05
  {
      position:relative;
      width:50%;
      height:80%; 
      margin-left:auto;
      margin-right:auto;
      padding-left:1%;
      background-color:#b6b2ae;
      overflow-y:scroll;
  }
  h1.h101
  {
      color:#950f0f;
      font-size:6.75vh;
      margin:0%;
  }
  h2.h201
  {
      text-align:center;
      font-size:4.5vh;
      margin:0%;
      padding:0%;
  }
  h2.h201,a:hover
  {
      color:red;
  }
  h2.h201,a:active
  {
      color:white;
  }
  h2.h202
  {
      font-size:5.2vh;
      color:#950f0f;
      margin:0px;
      text-align:center;
  }
  img.img01
  {
      width:100px;
      height:100px;
  }
  img.img02
  {
      width:100px;
      height:81.2px;
  }
  img.img03
  {
      width:100px;
      height:100px;
      vertical-align: bottom;
  }
  table
  {
      border:2px solid #950f0f;
      margin-top:3%;
      margin-bottom:9%;
      margin-left:auto; 
      margin-right:auto;
  }
  td:active
  {
      background-color:#ffffff;
  }
  td.td01
  {
      border:2px solid #3b5998;
      padding-top:35.5px;
      padding-bottom:36.5px;
  }
  td.td02
  {
      border:2px solid #00aced;
      padding-top:35.5px;
      padding-bottom:36.5px;
  }
  td.td03
  {
      border:2px solid #bb0000;
      padding-top:35.5px;
      padding-bottom:36.5px;
  }
  th.th01
  {
      border:2px solid #3b5998;
      background-color:#ffffff;
  }
  th.th02
  {
      border:2px solid #00aced;
      background-color:#ffffff;
  }
  th.th03
  {
      border:2px solid #bb0000;
      background-color:#ffffff;
  }
  </code></pre>
  
  <p>If you look closely at the bottom of the Web page (on Chrome), you can see white space at the bottom of the page. You have the really look at the bottom to see it. This doesn't happen on Internet Explorer (I'm using a pre-installed version of IE on windows ten, but I don't know what version). If you don't get the same problem, I get I'm sorry that this wasted your time, but I can show you screenshot proof if you really want it.</p>
  
  <p>Things to note:</p>
  
  <p>I have two other pages so there maybe be other things in my css text document that you may encounter. Ignore it.</p>
  
  <p><em>If percentages don't work than is there another way to simulate them for borders in Chrome?</em></p>
  
  <p>Thank you for for your time!</p>