title: Fixing the height of my html to fit screen
body: <p>I'm trying to make a sleek looking calculator that will look decent on multiple screen sizes. I'm close to being done but I can't get ride of extra empty space below the calculator, and I can't figure out how to fix it. Please help. DX</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Kevin's Calculator&lt;/title&gt;
    
    &lt;style&gt;
     html {height:100%; width:100%; margin:0px; bottom:0px;}
     body {background-color:black; height:100%; width:100%; display:block; margin:0px; padding:0px; bottom:0px;}
     .button {background-color: #cacacb; color:black; border:none; bottom:0px;
      text-align:center; text-decoration:none; float:left; font-weight:bold;
      display:block; font-size:32px; width:25%; height:14%; outline:none; margin:0px; padding:0px;}
     .mathPush {background-color: #0db2ff; margin:0px;}
     .button:hover {background-color:white;}
     .mathPush:hover {background-color:#80d6ff;}
     #keypad {display:block; width:100%; height:100%; margin:auto; bottom:0px;}
     #results {background-color:black; color:white; font-weight:bold; font-size:32px;
     text-align:left; width:100%; margin:auto; height:20%;}
     #calculator {position:relative; width:100%; height:100%; margin:0px; left:0px; right:0px; bottom:0vh;}
     #screen_1 {text-align:left; margin:auto; overflow-Y:hidden; overflow-X:hidden;
     text-overflow:hidden;}
     #zero {width:50%; text-align:left; text-indent:20%;}
    &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div id="calculator"&gt;
    &lt;div id="results"&gt;
     &lt;p id="screen_1"&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div id="keypad"&gt;
     &lt;button id="clear" class="button"&gt;C&lt;/button&gt;
     &lt;button id="inverse" class="button"&gt;+/-&lt;/button&gt;
     &lt;button id="precent" class="button"&gt;%&lt;/button&gt;
     &lt;button id="divide" class="button mathPush"&gt;/&lt;/button&gt;&lt;br&gt;
     &lt;button id="nine" class="button"&gt;9&lt;/button&gt;
     &lt;button id="eight" class="button"&gt;8&lt;/button&gt;
     &lt;button id="seven" class="button"&gt;7&lt;/button&gt;
     &lt;button id="multiply" class="button mathPush"&gt;*&lt;/button&gt;&lt;br&gt;
     &lt;button id="six" class="button"&gt;6&lt;/button&gt;
     &lt;button id="five" class="button"&gt;5&lt;/button&gt;
     &lt;button id="four" class="button"&gt;4&lt;/button&gt;
     &lt;button id="minus" class="button mathPush"&gt;-&lt;/button&gt;&lt;br&gt;
     &lt;button id="three" class="button"&gt;3&lt;/button&gt;
     &lt;button id="two" class="button"&gt;2&lt;/button&gt;
     &lt;button id="one" class="button"&gt;1&lt;/button&gt;
     &lt;button id="plus" class="button mathPush"&gt;+&lt;/button&gt;&lt;br&gt;
     &lt;button id="zero" class="button"&gt;0&lt;/button&gt;
     &lt;button id="dot" class="button"&gt;.&lt;/button&gt;
     &lt;button id="equal" class="button mathPush"&gt;=&lt;/button&gt;
     
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
   var firstArray = new Array;
   var secondArray = new Array;
   
   var next = false;
   
   var plusBoolean = false;
   var minusBoolean = false;
   var multiBoolean = false;
   var divideBoolean = false;
   
      var x = document.getElementById("screen_1");
      
      
    document.getElementById("one").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("1");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("1");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("two").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("2");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("2");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("three").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("3");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("3");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("four").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("4");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("4");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("five").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("5");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("5");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("six").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("6");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("6");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("seven").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("7");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("7");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("eight").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("8");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("8");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("nine").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("9");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("9");
     x.innerHTML = secondArray.join("");
    }
  })
    document.getElementById("zero").addEventListener("click", function(){
    if (next == false) {
     firstArray.push("0");
     x.innerHTML = firstArray.join("");
    }
    else if (next == true) {
     secondArray.push("0");
     x.innerHTML = secondArray.join("");
    }
  })
  
    document.getElementById("plus").addEventListener("click", function(){
    next = true;
    plusBoolean = true;
    minusBoolean = false;
    multiBoolean = false;
    divideBoolean = false;
    x.innerHTML = "";
  })
    document.getElementById("minus").addEventListener("click", function(){
    next = true;
    plusBoolean = false;
    minusBoolean = true;
    multiBoolean = false;
    divideBoolean = false;
    x.innerHTML = "";
  })
    document.getElementById("multiply").addEventListener("click", function(){
    next = true;
    plusBoolean = false;
    minusBoolean = false;
    multiBoolean = true;
    divideBoolean = false;
    x.innerHTML = "";
  })
    document.getElementById("divide").addEventListener("click", function(){
    next = true;
    plusBoolean = false;
    minusBoolean = false;
    multiBoolean = false;
    divideBoolean = true;
    x.innerHTML = "";
  })
    document.getElementById("equal").addEventListener("click", function(){
    if (plusBoolean == true) {
     firstArray = [Number(firstArray.join("")) + Number(secondArray.join(""))];
     x.innerHTML = firstArray[0];
     secondArray = [];
     console.log(firstArray[0]);
    }
    else if (minusBoolean == true) {
     firstArray = [Number(firstArray.join("")) - Number(secondArray.join(""))];
     x.innerHTML = firstArray[0];
     secondArray = [];
     console.log(firstArray[0]);
    }
    else if (multiBoolean == true) {
     firstArray = [Number(firstArray.join("")) * Number(secondArray.join(""))];
     x.innerHTML = firstArray[0];
     secondArray = [];
     console.log(firstArray[0]);
    }
    else if (divideBoolean == true) {
     firstArray = [Number(firstArray.join("")) / Number(secondArray.join(""))];
     x.innerHTML = firstArray[0];
     secondArray = [];
     console.log(firstArray[0]);
    }
  })
    document.getElementById("clear").addEventListener("click", function(){
    firstArray = [];
    secondArray = [];
    
    next = false;
    plusBoolean = false;
    minusBoolean = false;
    multiBoolean = false;
    divideBoolean = false;
    x.innerHTML = "";
  })
    &lt;/script&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>