Question

Here is my HTML:

<div id="container">
    <div id="left-container">
    </div>

    <div id="right-container">
    </div>
</div>

The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn’t!

Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container

html, body {
    height: 100%;
}
#container {
    position:relative;
    margin: 0 auto;
    width: 100%;
    height:100%;
    height: auto !important;
    min-height:100%;
    background: #fff;
}
#left-container {
    width: 300px;
    background: #ff0;
    height:100%;
    height: auto !important;
    min-height:100%;
}

Answer 1

This article discusses both the issue and solution in detail:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

This might help too:

#outer {
  position: absolute;
  height: auto;
  width: 200px;
  border: 1px solid red;
}

#inner {
  position: absolute;
  height: 100%;
  width: 20px;
  border: 1px solid black;
}

<div id='outer'>
  <div id='inner'>
  </div>
  text
</div>

See here for more details on the above:
How to make a floated div 100% height of its parent?