height: 100% nicht beachtet bei parent mit height: auto

[Hal]

Ich möchte einem header mit height: auto (drin ist ein dropdown Menü) einen transparenten Hintergrund geben. Dazu füge ich im header ein DIV ein mit 100% Höhe und Breite und weise diesem Farbe und opacity zu. Da die Höhe 100% ist, sollte es sich der Höhe des umgebenden headers anpassen.

Tut es aber nicht. Warum, ist mir nicht ganz klar.

In HTML sieht das ganze so aus (doctype ist HTML5):

(HINWEIS: Der header ist fixiert, der Code stammt von hier http://aktuell.de.selfhtml.org/artikel/css/footer/#fixierte_navigation

Der Code für das clearfix DIV stammt von hier: http://www.webtoolkit.info/css-clearfix.html)

<div id="header_container">
  <div id="header">
    <div class="clearfix">
      <div class="header_background"></div>
      <p>langer Text...</p>
    </div>
  </div>
</div>

Und CSS wie folgt:

body
{
    background: #ffffff;
    position: absolute;
}
html, body
{
    left: 0;
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    padding: 0;
    right: 0;
    top: 0;
    width: 100%;
}
#header_container
{
    left: 0;
    margin: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 3;
}
#header
{
    bottom: 0;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}
* html, * html body
{
    bottom: 0;
    height: 100%;
    overflow: hidden;
}
* html #header_container
{
    padding-right: 16px;
    position: absolute;
    width: 100%;
}
* html #header
{
    height: 100%;
    position: static;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  background: #0f0;
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}
.header_background
{
    background: #000;
    height: 100%;
    opacity: 0.6;
    filter:alpha(opacity=60);
    width: 100%;
}

Help anyone?

• Hal.