sacool: min-height funktioniert nicht richtig

Hallo,
ich möchte eine Seite mit CSS erstellen, die auf der linken Seite eine Navigationsleiste hat, welche mindestes 100% an Höhe haben soll.
Also egal wie viel Inhalt auf der linken Seite (Content-Bereich ist) die Navigationsleiste soll immer bis zum unteren Ende der Seite reichen.

Für diese Funktion habe ich die CSS-Eigenschaft min-height gefunden. Hier ist die Seite und nachfolgend die CSS-Eigenschaften:

<div class='site'>
 <div class='sidebar'>
  Navigationsleiste
 </div>

<div class='main'>
  inhalt
 </div>
</div>

div.site {
 position:absolute;
 top:0px;
 left:0px;
 width:740px;
 min-height:100%;
 border:1px solid #F00;
}

div.sidebar {
 float: left;
 width: 170px;
 min-height:100%;
 background-color:#FE0;
}

Habe ich irgendeinen Fehler in dem Codeausschnitt oder gibt es vielleicht sogar eine elegantere Methode (ich möchte Tabellen weitgehest vermeiden)?

  1. Hi,

    ich möchte eine Seite mit CSS erstellen, die auf der linken Seite eine Navigationsleiste hat, welche mindestes 100% an Höhe haben soll.

    100% wovon?
    Welche Höhe hat der Containing block? Und dessen Containing block? Und dessen ...

    Habe ich irgendeinen Fehler in dem Codeausschnitt oder gibt es vielleicht sogar eine elegantere Methode (ich möchte Tabellen weitgehest vermeiden)?

    Hast Du denn auch mit einem Browser getestet, der min-height überhaupt kennt?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi,

      ich möchte eine Seite mit CSS erstellen, die auf der linken Seite eine Navigationsleiste hat, welche mindestes 100% an Höhe haben soll.

      100% wovon?
      Welche Höhe hat der Containing block? Und dessen Containing block? Und dessen ...

      Habe ich irgendeinen Fehler in dem Codeausschnitt oder gibt es vielleicht sogar eine elegantere Methode (ich möchte Tabellen weitgehest vermeiden)?

      Hast Du denn auch mit einem Browser getestet, der min-height überhaupt kennt?

      cu,
      Andreas

      habe es mit Opera getestet. Der sollte das ja eigentlich können.

      Also bin ich mit min-height völig auf der falschen Spur?
      Gibt es eine funktionierende Lösung für das Problem (die Aufgabe)?

      Ich habe bisher immer nur Tabellen genutzt, möchte aber langsam davon weg kommen...

      1. Hello out there!

        Hi,

        [snip]

        Andreas

        Bitte keine Vollzitate.

        Also bin ich mit min-height völig auf der falschen Spur?

        Nein.

        Gibt es eine funktionierende Lösung für das Problem (die Aufgabe)?

        Ja. Sowohl MudGuard als auch Gernot haben sie dir genannt.

        See ya up the road,
        Gunnar

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

    ist dir klar, dass, damit min-height wirksam wird, auch die Höhe des Elternelements definiert sein muss, und solange du dies prozentual machst, bis hinauf zum HTML-Element, einmal abgesehen davon dass das im IE sowieso nicht funktioniert, der aber stattdessen height ungefähr so interpretiert, wie er min-height interpretieren sollte?

    Gruß Gernot