HTML Element refuses to inherit height of it's parent

Question

TL;DR: 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?

EDIT I've made a fiddle for the code now. First time using Fiddle, hope I did it correctly:
http://jsfiddle.net/B7k4G/

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 ~
https://i.stack.imgur.com/Sm8Jf.png

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.

        <div class="col-xs-3 sidebar" id="ASEsideNav">
      <!-- This is left Vertical Nav bar -->
      <div class="navbar navbar-inverse" id="ASEsideNav">

      <!-- This is the heading -->
      <div id="ASEsideHeader">
        <h3 id="ASEheading">Our Products</h3>
      </div>

        <div class="collapse navbar-collapse" id="ASEsideNav">
          <ul class="nav nav-stacked" id="menu-bar"> <!-- Notice the "nav-stacked" class we added here -->
          </ul>

          <!-- This is the catalogue section -->
          <div>
            <div id="ASEsideHeader">
              <h3 id="ASEheading">Download Catalog</h3>
            </div>
            <div>
              <a href="/ase_site_new/downloads/catalog2009.pdf"><img src="/ase_site_new/images/catalog2009.png" width="228" height="168" alt="Download Catalog" class="center-block"></a>
            </div>
          </div>

        </div> <!-- End of navbar-collapse -->
      </div> <!-- End of navbar-inverse -->
    </div> <!-- End of row -->

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.

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?

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.

  <!-- This where the website begins -->

<!-- Applies black container shadow -->
<div id="ASEwrapper">

  <!-- This imports the top portion of the website -->
  <?php 
    $path = $_SERVER['DOCUMENT_ROOT'];
    $path .= "/ase_site_new/import/import_navtop.html";
    include_once($path);
  ?>

  <!-- These are the breadcrumbs that show the page progession -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12" id="ASEbreadcrumbs">
        <ol class="breadcrumb">
          <li class="active">Home</li>
        </ol>
      </div>
    </div>
  </div>

  <div class="container" id="contentContainer">
    <div class="row" id="defineMainRow">

      <!-- This imports the side bar navigation of the website -->
      <?php 
        $path = $_SERVER['DOCUMENT_ROOT'];
        $path .= "/ase_site_new/import/import_navside.html";
        include_once($path);
      ?>

Answer 1

As I can't test your code, I will make an attempt to solve it theoretically

Your ASEsideNav is inheriting it's height from the parent element defineMainRow which doesn't have a height and so there is nothing to inherit. Try setting defineMainRow's height to 100%. You may have to set the height of all elements containing it to 100% too, until a parent element has an explicit height (eg. 800px), or you reach the body element.

See this SO for details: CSS - make div's inherit a height

EDIT

Problem found: the sidebar is floated to left due to bootstrap's .sidebar class. A floated div is taken out of the regular flow of positioned elements and isn't aware of it's parent or sibling elements, thus it can't inherit a parent's height.

Sadly there is no fast and easy solution to this as layout is based on the floated sidebar so

option A: live with the current sidebar

or B: re-design your layout which I see as the best course of action. Remove content and focus on the layout of header, footer, sidebar and content. You will find a lot of tutorials out there to help you, SO is a good place to start: HTML page with a standard header footer layout without using table tag