Das CSS Mindesthöhen-Problem · 11. Juni 2005

Oft stellt sich das Problem, dass man einer Box eine Mindesthöhe mitgeben möchte, zum Beispiel wenn ein floating image darin platziert werden soll, wie auf meiner Business Netzwer-Seite . Leider kennen nicht alle Browser das “min-height”-Attribut, und auch interpretieren nicht alle das “height”-Attribut gleich.

Mozilla und Ähnliche kennen min-height, und wenden es korrekt an. Im Gegensatz dazu interpretiert der Internet-Explorer “height” in etwa so, wie man es von “min-height” erwarten würde. Daher sieht der kürzeste und eleganteste Workaround, den ich bisher gefunden habe so aus:

DIV {
    min-height: 100px;
    # height: 100px;
}

Dieser “Hack” basiert auf dem Umstand, dass die meisten Browser (mit Ausnahme des Internet-Explorers) ein # als Kommentar akzeptieren. Somit rendert der IE die “height” nach seinem Gusto, also so wie wir möchten. Die anderen Browser halten sich an das “min-height”-Attribut, und interpretieren das “height”-Attribut als Kommentar.