title: 100% height on body and html, but I still can't set height on divs
body: <p>I have a double column html setup using Bootstrap: </p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row fullHeight"&gt;
      &lt;div class="col-sm-3 col-lg-2"&gt;
          &lt;nav class="navbar navbar-default navbar-fixed-side"&gt;
              &lt;img src="assets/images/favicon.ico" class="logo"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Getting Started&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;API Credentials&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;Authentication&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;Best Practices&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;Pagination&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;Rate Limits&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;Time&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;Webhooks&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="#"&gt;API Reference&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;Lock&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;LockCommand&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;LockEvent&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;OAuth Token&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="subLi"&gt;&lt;a href="#"&gt;User&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-9 col-lg-10"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6 col-lg-6 leftSide"&gt;
                  &lt;h1&gt;Description&lt;/h1&gt;
                  &lt;h3&gt;Returns information about the current user&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 col-lg-2 rightSide"&gt;
                  &lt;h1&gt;Method&lt;/h1&gt;
                  &lt;h3&gt;Get&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4 col-lg-4 rightSide"&gt;
                  &lt;h1&gt;URL&lt;/h1&gt;
                  &lt;h3&gt;/me&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6 col-lg-6 leftSide"&gt;
                  &lt;h4&gt;Request Properties&lt;/h4&gt;
                  &lt;p&gt;None&lt;/p&gt;
                  &lt;h4&gt;Response Properties&lt;/h4&gt;
                  &lt;p&gt;Returns a &lt;a href="#" class="modalLink"&gt;User&lt;/a&gt; object&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6 col-lg-6 rightSide"&gt;
                  &lt;h4&gt;Example Request&lt;/h4&gt;
                  &lt;pre&gt;GET /me&lt;/pre&gt;
                  &lt;h4&gt;Example Response&lt;/h4&gt;
                  &lt;pre&gt;HTTP/1.1 200 OK&lt;/pre&gt;
                  &lt;pre id="_me"&gt;&lt;/pre&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I don't understand why my second .leftSide div is not going the full height of its parent row with the CSS styling I currently have: </p>
  
  <pre><code>html, body, .row {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .leftSide {
    background-color: #00a3da;
    color: white;
    height: 100%;
    min-height: 100%
  }
  
  .rightSide {
    background-color: white;
    color: black;
    height: 100%;
    min-height: 100%
  }
  </code></pre>
  
  <p>I can give a specific height, but I want it to be responsive. I have tried finding the answer and most posts say to make sure that the parent div has a height. I tried to make sure that all possible parents had a height, so what am I missing? Thanks in advance for any help! :)</p>
  
  <p>EDIT *** Here is a JS fiddle of where I currently am: <a href="https://jsfiddle.net/DTcHh/25309/" rel="nofollow">https://jsfiddle.net/DTcHh/25309/</a></p>
  
  <p>I have the heights matching now, but they are taking up the whole page instead of just what the rows height was originally. Is there a way around this so that the height is the same size as the longest column in the row's content?</p>