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.

[Gunnar Bittersmann]

@@Hal:

nuqneH

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

Works as designed.

“The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.” [CSS21 §10.5]

Qapla'

[Hal]

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

Works as designed.

In der Tat.

Habe jetzt mal clearfix DIV absolut positioniert. Jetzt läuft es überall, außer im IE6. Hast du ne Ahnung, warum der ausschert?

Sieht jetzt so aus:

.clearfix {
  background: #0f0;
  display: inline-block;
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

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

* html .clearfix {
  height: auto;
}

[Gunnar Bittersmann]

@@Hal:

nuqneH

Jetzt läuft es überall, außer im IE6. Hast du ne Ahnung, warum der ausschert?

Ich hab nicht mal ne Ahnung, was IE6 ist. ;-)

hasLayout? 'zoom: 1'?

Qapla'

[Hal]

hasLayout? 'zoom: 1'?

Nee, war ich auch schon drauf gestoßen. ;-(

• Hal.

[Gunther]

Hallo!

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.

So ganz verstehe ich deine Erklärung nicht ...!?
Warum braucht es ein extra Element für den Background, wenn dieses exakt dieselben Abmessungen haben soll wie das Elternelement?
Und wenn eh alles absolute oder fixed positioniert ist, warum dann height:100%; und nicht top: 0; bottom: 0;?

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

Das hat Gunnar dir ja schon erläutert.

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

Wenn du HTML5 verwendest, warum dann kein Header-Element?

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

Du kennst aber auch die mit diesem Layout verbundenen (Usability-)Probleme? Stichwort "Responsive Design".

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>

Wozu der Clearfix!?
Auf der von dir verlinkten Quelle steht ja:"The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow."
Ich sehe bei dir aber nichts von irgendwelchen gefloateten Elementen ...!

Und das nächste Problem sehe ich auf dich zukommen, bei dem ersten Element nach deinem "header_container" ...!

Wenn du evt. nochmal etwas genauer dein eigentliches Ziel beschreiben könntest, könnte man ggf. einen Verbesserungsvorschlag machen.

Du kennst aber auch den Unterschied zwischen Opacity und transparentem Hintergrund?

Gruß Gunther