title: Style elements in html page to adjust dynamically depending on the size of the screen
body: <p>Hey guys I am building a web chat and my first objective is to put together the html page. I am using the BootStrap 3 grid, so whenever I resize the width of the screen my elements adjust accordingly to the size of the screen. However, the BootStrap grid does not work when I resize the height of the screen, hence my button is cut off and I cannot figure out a way to solve this. I tried using a library from git hub (<a href="https://gist.github.com/metaist/7632393" rel="nofollow noreferrer">https://gist.github.com/metaist/7632393</a>), but it did not solve my issue either...</p>
  <p>This is my code:</p>
  <p>HTML:</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
  
          &lt;div class=&quot;row&quot; id=&quot;top-div&quot;&gt;
              &lt;!-- The users username --&gt;
              &lt;h1 class=&quot;text-primary&quot;&gt;Placeholder Username&lt;/h1&gt;
          &lt;/div&gt;
  
  
          &lt;div class=&quot;row&quot; id=&quot;chat-and-users&quot;&gt;
              &lt;div class=&quot;form-group&quot; id=&quot;middle-div&quot;&gt;
                  &lt;div&gt;
                      &lt;div class=&quot;col-xs-9 bg-info&quot; id=&quot;chat-column&quot;&gt;
                          &lt;!-- Chat Column --&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-xs-3 bg-success&quot; id=&quot;users-column&quot;&gt;
                          &lt;!-- Users Column --&gt;
                      &lt;/div&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class=&quot;row&quot; id=&quot;bottom-div&quot;&gt;
              &lt;form action=&quot;&quot;&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;input type=&quot;text&quot; id=&quot;message-input&quot; class=&quot;form-control&quot; placeholder=&quot;Type a message...&quot;&gt;
                  &lt;/div&gt;   
                  &lt;button type=&quot;submit&quot; id=&quot;button-send&quot; class=&quot;btn btn-primary&quot;&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>body{
      background-color: #E5E5E5;
  }
  
  #chat-and-users{
      border-radius: 3px;
      border: 1px solid #202020;
  }
  
  #chat-column{
      height: 80vh;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      border-right: 1px solid #202020;
  }
  
  #users-column{
      height: 80vh;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      border-left: 1px solid #202020;
  } 
  
  #bottom-div {
      margin-top: 15px;
  }
  </code></pre>
  <p>This is how my page looks, notice that I cannot see the entire button even if I reduce my doc (My apps) to the minimum size...</p>
  <p>[![enter image description here][1]][1]</p>
  <p>I want the h1 to take 10% of the page, the blue/green rectangles 80% of the page (hence why I gave them a height of 80 vh), and the input/button form 10% of the page. Any form of help is appreciated!</p>