Freddy: min-height funktioniert nicht ;(

Hallo,
ich hab alles tausendmal ausprobiert und finde keine Lösung.

Eigentlich wollte ich meine geschachtelten divs im IE und in anderen Browsern auf "mindestens Fensterhöhe" stellen. So fand ich hier im Forum heraus, dass min-height für alle Browser funktioniert, man aber per hack o.ä. für den IE height nehmen muss. So weit, so gut.

Nun klappt alles, nur nicht min-height. Egal, wo ich min-height in meine styles schreibe, kein Browser setzt diese um!

Mein html-Aufbau:

<body>
<div id="contentcenter">
  <div id="oben"></div>
  <div id="main">
    <table>
      <tr>
        <td id="content"></td>
      </tr>
    </table>
  </div>
  <div id="unten"></div>
</div>
</body>

Meine styles:

html, body {
 margin:0;
 padding:0;
 height:100%;
 width:100%;
}

#contentcenter {
 position: absolute;
 width: 96%;
 min-height:90%;
 left: 2%;
}

#oben {
 position: relative;
 top: 20px;
 padding: 5px;
}

#main {
 position: relative;
 width: 97.5%;
 min-height:85%;
 top: 35px;
 padding: 10px;
 margin-bottom: 50px;
}

#unten {
 position: relative;
 bottom: 0px;
}

Warum funktioniert das so nicht?

Gruß
Freddy

  1. Hallo,

    Warum funktioniert das so nicht?

    weil du zwar HTML und BODY eine Höhe von 100% zugewiesen hast, aber deine gesamten Inhalte alle in dein #contentcenter DIV gepackt hast und dieses absolut positioniert hast, womit es aus dem Elementfluss raus ist (und demnach die Werte von HTML und BODY auch nicht ererben kann).

    Überhaupt ein eher wildes Konstrukt für ein Layout. Wozu bspw. die Tabelle? Und warum diese ganze 'Rumpositionierei'?

    Gruß Gunther

    1. Hello out there!

      Warum funktioniert das so nicht?
      weil du zwar HTML und BODY eine Höhe von 100% zugewiesen hast, aber deine gesamten Inhalte alle in dein #contentcenter DIV gepackt hast und dieses absolut positioniert hast, womit es aus dem Elementfluss raus ist (und demnach die Werte von HTML und BODY auch nicht ererben kann).

      Nein, das Aus-dem-Fluss-Nehmen hat keinen Einfluss auf die Höhe des positionierten Elements.

      „<percentage>
          Gibt eine prozentuale Höhe an. Der Prozentwert wird relativ zur Höhe des umschließenden Blocks der erzeugten Box berechnet.“ [CSS2 §10.5, CSS2 §10.7]

      „Der umschließende Block für eine positionierte Box wird durch den nächsten positionierten Vorfahren eingerichtet (oder, falls es keinen solchen gibt, durch den umschließenden Ausgangsblock […]).“ [CSS2 §9.8.4]

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      1. Hello Gunnar!

        Warum funktioniert das so nicht?
        weil du zwar HTML und BODY eine Höhe von 100% zugewiesen hast, aber deine gesamten Inhalte alle in dein #contentcenter DIV gepackt hast und dieses absolut positioniert hast, womit es aus dem Elementfluss raus ist (und demnach die Werte von HTML und BODY auch nicht ererben kann).

        Nein, das Aus-dem-Fluss-Nehmen hat keinen Einfluss auf die Höhe des positionierten Elements.

        Ups, war wohl doch schon zu spät, zu heiss, zu ... gestern Nacht! Du hast natürlich Recht, und ich ziehe alles zurück und behaupte das Gegenteil!
        Die korrekte Antwort hat Freddy ja auch schon erhalten.
        Also Danke für die Korrektur Gunnar.

        Sorry Freddy (wobei ich meine Aussage über das "wilde Konstrukt" aber nach wie vor stehen lasse)!

        Gruß Gunther

  2. Hallo Freddi!

    Nun klappt alles, nur nicht min-height. Egal, wo ich min-height in meine styles schreibe, kein Browser setzt diese um!

    Ich habe es bei mir im Firefox getestet und es funktioniert.
    Du musst damit es im IE funktioniert noch mit einem hack erweitern

    /*\*/
    * html #contentcenter {
        height: 90%;
    }
    /**/

    Hoffe das hilft
    Liebe Grüße
    Daniela

  3. Hello out there!

    <div id="contentcenter">
      <div id="main">
      </div>
    </div>

    html, body {
    height:100%;
    }
    #contentcenter {
    min-height:90%;
    }
    #main {
    min-height:85%;
    }

    Warum funktioniert das so nicht?

    Wegen:

    „<percentage>
        Gibt einen Prozentwert für die Ermittlung des berechneten Werts an. Der Prozentwert wird relativ zur Höhe des umschließenden Blocks der erzeugten Box berechnet. Ist die Höhe des umschließenden Blocks nicht explizit angegeben (das heißt, sie ist von der Inhaltshöhe abhängig), wird der Prozentwert als 'auto' interpretiert.“ [CSS2 §10.7]

    #contentcenter ist also mindestens 90% der Höhe von body hoch, prima, das ist auch so (wie du durch eine Hintergrundfarbe sehen kannst).

    Die Mindesthöhe von #main richtet sich nach der _Höhe_ von #contentcenter, die aber nicht angegeben ist! Folglich wird sie als 'auto' interpretiert.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
  4. Hallo,

    vielen Dank für eure Antworten. Nun bin ich einiges schlauer geworden.

    Ich muss mir wohl überlegen, wie ich den Auftritt anders aufbaue, damit ich nicht diese Verschachtelung drin habe.

    Das "wilde Konstrukt" habe ich so gebaut, um meine divs dynamisch an die Größe des Fensters anzupassen. Das hatte sonst auch ganz gut geklappt, aber vielleicht ist das wirklich nicht notwendig ;)

    Gruß
    Freddy