Mitch: DIV mindestens auf Fenstergröße

Hallo zusammen,

ich habe folgendes Problem:

Ein Titel-Div, ein Navi-Div, ein Content-Div und zwei Footer-Divs. Alles zusammen in einem Main-Div.

Bei wenig Inhalt im Content-Div schweben die Footer in der Luft. Die sollen aber immer ganz unten sein. Also müsste ich entweder dem Content-Div ne Mindest-Größe geben oder die Footer zwingen am unteren Fensterrand zu kleben. Das kriege ich aber leider nicht hin. Von Tabellen will ich weg.

Siehe hier: http://www.lunabits.net/demo/demo.html

Hat wer eine Idee/alternativen Ansatz wie man das machen könnte (oder einen Tipp wie man mein Problem in kurzen Worten beschreiben könnte - bin nicht Suchmaschinen-faul, aber irgendwie gebe ich die falschen Begriffe ein)?

Schonmal danke.

Mitch

  1. Nachtrag:

    Das Content-Div sollte den leeren Platz ausfüllen. Ich will ja nicht ne große weiße Fläche da haben.

    Im Prinzip so wie hier, aber eben ohne Tabellen: http://www.lunabits.net/mitchs-texte/warum-fische-kein-wasserski-fahren.html

  2. gib doch dem main div mal mit dem style-sheet: min_height:100%versucht und den footer dann einfach mit nem abstand zu bottom ausgerichtet?
    ich denke das sollte es tun, kanns aber grad nicht testen ;)

  3. Hallo!

    Bei wenig Inhalt im Content-Div schweben die Footer in der Luft. Die sollen aber immer ganz unten sein. Also müsste ich entweder dem Content-Div ne Mindest-Größe geben oder die Footer zwingen am unteren Fensterrand zu kleben. Das kriege ich aber leider nicht hin. Von Tabellen will ich weg.

    Nach meinem Wissensstand und mit Deinem Lösungsansatz nur mit Browsern, die *min-height* verstehen, lösbar.
    Gib Deinem .div_main eine min-height von etwa 95%, setze im HTML  das div mit der Klasse .div_footer, der Du eine Höhe von ~5% gibst, außerhalb des .div_main dann sollte es zumindest mit dem Firefox und Mozilla-Browsern funktionieren. Opera weiß ich nicht, IE und Konqueror kennen min-height nicht.

    Mit height ist allenfalls eine Lösung mit overflow:scroll möglich.
    Hat aber auch verschiedene Probleme.

    Übrigens: Unterstriche sollte man in Klassennamen nicht verwenden!

    Grüße
    saltun

  4. Hallo Mitch

    Ein Titel-Div, ein Navi-Div, ein Content-Div und zwei Footer-Divs. Alles zusammen in einem Main-Div.

    Versuche es doch einmal so:

    • html, body  bekommt height:100%
    • Main-Div bekommt min-height
        Das versteht der IE natürlich nicht, der dehnt dafür Elemente einfach aus,
        wenn der Inhalt nicht reinpasst. Deshalb bekommt Main-Div nur für den IE
        ein height.
    • Footer-Div bekommt ein position:absolute und bottom
        Damit es nicht am Fensterrand sondern am Main-Div ausgerichtet wird, geben
        wir diesem noch ein position:relative mit.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!