title: How to make divs the viewing height
body: <p>I have 3 columns in a <code>&lt;div&gt;</code>.  The <code>&lt;div&gt;</code> for the most columns does not extend to the max height.  I want it to be max height for the default browser view and when I decrease the browser window (mobile version).</p>
  
  <p>Here is the code and css for the right column:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="col-xs-3"&gt;
  &lt;div class="column-right"&gt;
  
      &lt;span class="filter-image-right"&gt;
          &lt;img src="/img/clock_library-right.png" /&gt;
          &lt;img src="/img/heart_library-right.png" /&gt;
          &lt;img src="/img/handshake_library-right.png" /&gt;
          &lt;img src="/img/lamp_library-right.png" /&gt;
      &lt;/span&gt;
  
      &lt;div&gt;
      &lt;h6 class="right-column-heading"&gt;&lt;img src="/img/minus.png"/&gt; Cleaning&lt;/h6&gt;
  
      &lt;/div&gt;
          &lt;p&gt;
          The concept of cleaning makes little sense to young children.  For preschoolers,
          instructions like, "Put your toys away" are too vague or abstract.  You need to
          break things down for them.  "Pick up all your blocks and put them in the bin."
          "put your dolls on the bottom shelf."  The specificity of these instructions is key.
          "Clean your room!" is simply overwhelming.
          &lt;/p&gt;
  
      &lt;h6 class="right-column-heading"&gt;Make Bed&lt;/h6&gt;
  
          &lt;p&gt;
          For a younger child; Focus on smoothing out sheets and blankets for a clear
          playing/sitting surface.
          &lt;/p&gt;
  
      &lt;h6 class="right-column-heading"&gt;test&lt;/h6&gt;
  
          &lt;p&gt;
          The concept of cleaning makes little sense to young children.  For preschoolers,
          instructions like, "Put your toys away" are too vague or abstract.  You need to
          break things down for them.  "Pick up all your blocks and put them in the bin."
          "put your dolls on the bottom shelf."  The specificity of these instructions is key.
          "Clean your room!" is simply overwhelming.
          &lt;/p&gt;
  
      &lt;h6 class="right-column-heading"&gt;test2&lt;/h6&gt;
  
          &lt;p&gt;
          The concept of cleaning makes little sense to young children.  For preschoolers,
          instructions like, "Put your toys away" are too vague or abstract.  You need to
          break things down for them.  "Pick up all your blocks and put them in the bin."
          "put your dolls on the bottom shelf."  The specificity of these instructions is key.
          "Clean your room!" is simply overwhelming.
          &lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>css:</p>
  
  <pre><code>.column-right { 
  
  background-color: #d0d0d0; 
  overflow-y: scroll;
  padding:10px;
  float: right;
  margin-right:-17px;
  max-height:570px;
  }
  </code></pre>
  
  <p>Here is the css of the main div that holds all three columns:</p>
  
  <pre><code>#content-content-library {
  background: white;  
  -webkit-border-bottom-left-radius: 15px;
  -webkit-border-bottom-right-radius: 15px;
  -moz-border-radius-bottomleft: 15px;
  -moz-border-radius-bottomright: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  position: relative;
  overflow: hidden;
  }
  </code></pre>
  
  <p>I am new to html and css, so any help is appreciated.  Thank you.</p>
  
  <p>EDIT:</p>
  
  <p>I have modified the css for the right column and now the left column.</p>
  
  <pre><code>.column-right { 
  background-color: #d0d0d0; 
  overflow-y: scroll;
  padding:10px;
  float: right;
  margin-right:-17px;
  height: 100vh;
  }
  
  .column-left { 
  height: 100vh;
  }
  </code></pre>
  
  <p>html for the left column:</p>
  
  <pre><code>&lt;div class="col-xs-3"&gt;
      &lt;div class="column-left"&gt;
  
              &lt;div class="row"&gt;
  
                      &lt;div class="left-navigation-home"&gt;
                          &lt;img src="/img/home_library.png" /&gt;
                          &lt;span&gt;Home&lt;/span&gt;
  
                          &lt;span class="test"&gt;1&lt;/span&gt;
                          &lt;img src="/img/side_arrow.png" height="15" width="15" /&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;          
  &lt;/div&gt;
  </code></pre>