<div id = "container" class = "container">
    <div class = "center">
      <header id = "top" class = "header" onclick = header.innerHTML = "click"> </header>
      
      <header id = "left" class = "my_dynamic_header" onclick = header.innerHTML = "click"> </header>
     
  <button onclick = "user_click()">This is a Button.</button>

      <header id = "right" class = "my_dynamic_header" onclick = header.innerHTML = "click"> </header>
      <header id = "low" class = "header" onclick = header.innerHTML = "click"> </header> 
      
    </div>
</div>



<style>

button {
    color: #FAFAFA;
    background-color: #1E88E5;
    padding: 15px;
    border: solid 4px #1976D2;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 550;
    font-size: 10px;
    transition: 0.8s;
    transition-timing-function: ease;
  }
  
  button:hover {
    padding: 18px;
    font-size: 17px;
    background-color: #1565C0;
    border: solid 6px #0D47A1;
    font-style: italic;
    transform: rotate(360deg);
  }
  
  button:active {
    padding: 18px;
    font-size: 17px;
    background-color: #2979FF;
    border: solid 6px #2962FF;
    font-style: italic;
    transition: 0.09s;
    transform: rotate(360deg);
  }
  
  .header {
    color: #FAFAFA;
    padding: 37px;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 550;
    font-size: 15px;
    transition: 0.8s;
    transition-timing-function: ease;
  }
  
  .my_dynamic_header {
    color: #FAFAFA;
    padding: 37px;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 550;
    font-size: 15px;
    transition: 0.8s;
    transition-timing-function: ease;
    display:inline-block;
  }
  
  .container {
    position: relative;
    border: 0px solid #212121;
  }
  
  .center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  body {
    background-color: #212121;
  }
  
  </style>

  <script>



  function user_click() {
    document.getElementById("top").innerHTML = "North";
    document.getElementById("low").innerHTML = "South";
    document.getElementById("left").innerHTML = "West";
    document.getElementById("right").innerHTML = "East";
    }
      
    
    Run();
    
    function Run() { 
      var h = window.innerHeight;
      document.getElementById("container").style.height = '' + h-23 + 'px'
                    console.log("a");
    requestAnimationFrame(Run());
    }
    </script>