title: HTML Element refuses to inherit height of it's parent
body: <p><strong>TL;DR:</strong> ASEsideNav won't inherit the height of any of it's parents, regardless of the "!important" tag. I just want the side bar to scale with the size of the contain in case the page extends farther than 800px (Which in a LOT of cases, it does). What do?</p>
  
  <p><strong>EDIT</strong>
  I've made a fiddle for the code now. First time using Fiddle, hope I did it correctly:<br>
  <a href="http://jsfiddle.net/B7k4G/" rel="nofollow noreferrer">http://jsfiddle.net/B7k4G/</a></p>
  
  <p>Please refer to the image below for everything being said. I've included screenshots, code and page layout within the image. I don't have the power to embed it into this thread and with how large the image is, it wouldn't be a good idea anyway. Moving on ~<br>
  <a href="https://i.imgur.com/u0PXRGb.png" rel="nofollow noreferrer">http://i.imgur.com/u0PXRGb.png</a>   </p>
  
  <p>As you can see on the left, my collapsible navbar wont match the height of it's parent. The only way I was even able to fit the catalog part on the site is by having set a "min-height" to 800px. All I want is for ASEsideNav to match the height of defineMainRow or contentContainer, which are all children of ASEwrapper. </p>
  
  <pre><code>        &lt;div class="col-xs-3 sidebar" id="ASEsideNav"&gt;
        &lt;!-- This is left Vertical Nav bar --&gt;
        &lt;div class="navbar navbar-inverse" id="ASEsideNav"&gt;
  
        &lt;!-- This is the heading --&gt;
        &lt;div id="ASEsideHeader"&gt;
          &lt;h3 id="ASEheading"&gt;Our Products&lt;/h3&gt;
        &lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse" id="ASEsideNav"&gt;
            &lt;ul class="nav nav-stacked" id="menu-bar"&gt; &lt;!-- Notice the "nav-stacked" class we added here --&gt;
            &lt;/ul&gt;
  
            &lt;!-- This is the catalogue section --&gt;
            &lt;div&gt;
              &lt;div id="ASEsideHeader"&gt;
                &lt;h3 id="ASEheading"&gt;Download Catalog&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;a href="/ase_site_new/downloads/catalog2009.pdf"&gt;&lt;img src="/ase_site_new/images/catalog2009.png" width="228" height="168" alt="Download Catalog" class="center-block"&gt;&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt; &lt;!-- End of navbar-collapse --&gt;
        &lt;/div&gt; &lt;!-- End of navbar-inverse --&gt;
      &lt;/div&gt; &lt;!-- End of row --&gt;
  </code></pre>
  
  <p>I've tried a myriad of different properties pertaining to height, min-height and display but to no avail. I've even mucked about with it within Firebug and Firefox's native inspector and can't get ASEsideNav to do what I want. None of Auto, inherit, or % work.</p>
  
  <p>I feel like there might be something I'm missing? Or maybe I have the format of something wrong. Though, I'm sort of afraid of changing the format because I'd then have to change a large number of HTML documents. There must be some way to fix this via CSS? </p>
  
  <p>On the left, you can see the screenshot of the site being rendered. On the right you can see the class structure. Below those, you can see references to the HTML and CSS.  </p>
  
  <pre><code>  &lt;!-- This where the website begins --&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;!-- Applies black container shadow --&gt;
  &lt;div id="ASEwrapper"&gt;
  
    &lt;!-- This imports the top portion of the website --&gt;
    &lt;?php 
      $path = $_SERVER['DOCUMENT_ROOT'];
      $path .= "/ase_site_new/import/import_navtop.html";
      include_once($path);
    ?&gt;
  
    &lt;!-- These are the breadcrumbs that show the page progession --&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-12" id="ASEbreadcrumbs"&gt;
          &lt;ol class="breadcrumb"&gt;
            &lt;li class="active"&gt;Home&lt;/li&gt;
          &lt;/ol&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container" id="contentContainer"&gt;
      &lt;div class="row" id="defineMainRow"&gt;
  
        &lt;!-- This imports the side bar navigation of the website --&gt;
        &lt;?php 
          $path = $_SERVER['DOCUMENT_ROOT'];
          $path .= "/ase_site_new/import/import_navside.html";
          include_once($path);
        ?&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/TYUIy.png" alt="enter image description here"></p>