<div>-Menü - Höhe passt sich Content nicht an

[Powerslave]

Guten Abend,

ich habe ein kleines Problemchen (siehe angefügte Datei):

ich habe auf meiner Seite einen <div>-Container der alles einfasst, ein <div>-Menü 100% hoch und daneben den <div>-Content und daneben noch einen kleinen weißen Balken.
Wenn der Content nun allerdings länger als die Bildschirmhöhe ist (man also scrollen muss) passt sich der Menü-<div> nicht an die Höhe an. Er wird also bei 100% der normalen Bildschirmhöhe abgeschnitten.

Hier mal mein CSS:

body, html {
    background-color:#2A7448;
    color:#FFF;
    font-family:verdana, arial, sans-serif;
    font-size:12px;
    height:100%;
    padding:0px;
    margin:0px;
}

div#container {
    height:100%;
    width:900px;
    margin:0px auto;
}

div#menue {
    background-color:#FFF;
    color:#2A7448;
    height:100%;
    width:175px;
    float:left;
    border-left:1px solid #000;
    border-right:1px solid #000;
}

div#content {
    text-align:center;
    width:706px;
    height:100%;
    padding:0px;
    float:left;    
}

div#right {
    background-color:#FFF;
    height:100%;
    width:15px;
    border-left:1px solid #000;
    border-right:1px solid #000;
    float:right;
} 

Wie kann ich denn das lösen?

Im angefügten Bild ist das Problem zu sehen.

[dkdenz]

Hilft das hier weiter? No.2 :: CSS Template :: XTML 1.0 Transitional
(Das mit dem Balken kannst Du mit einem Hintergrundbild lösen)

[Powerslave]

Hallo,

danke für die Antwort, allerdings gefällt mir diese Lösung nicht, ist finde ich ein bisschen pfuschig mit dem dicken Border und dem IE-Trick ;-)

Gibts auch noch eine andere Möglichkeit?

PS: Spricht etwas gegen diese Variante: No.1 :: CSS Template :: XTML 1.0 Transitional ?

[ein schlauer]

Ich würd mir bei sowas Gedanken über eine Tabelle machen. Wenn du drei von einander abhängige Spalten willst, geht das sauber nur mit einer Tabelle, alles andere ist mehr oder weniger rumgemurkse.

Oder du versucht ein CSS Layout umzusetzen, das die Möglichkeiten dieser Technik nutzt (dazu gehört halt leider weder Spaltensatz noch ein Seitenraster, sondern du kannst sehr gut Elemente fliessen lassen, damit sie sich an die unterschiedlichen Darstellungsumgebung anpassen können)

[Corovus]

Du solltest evtl auch mal den html code dazu posten, damit man sehen kann ob du da etwas falsch gemacht hast.

[Corovus]

Ich hab mir deinen Code nochmal angeschaut und hab dein Problem glaube ich gefunden.

Schau dir mal deine Höhenangaben genau an. Wenn du bei einem DIV element ne Höhenangabe in % machst, bezieht sich das immer auf dessen Elternelement. Wenn du aber in dem Elternelement AUCH ne Höhe von 100% angibtst, ist es klar dass dein div#menu nur so groß wird wie sein eigner Inhalt da 100% von 100% nicht funktionieren. Dein div#menu kann sich die Größenangaben in pixel oder pt ja nicht aus den haaren saugen .

Wenn du das so lösen willst, musst du entweder der div#container ne feste Höhe zuweisen oder du packst den weisen Hintergrund, richtig positioniert, als Hintergrundbild in deinen div#container.

Gruß Coro