CSS Design auf Browser Fenster ausgelegt

[l0rdseth]

Hi,

so nach einer Stunde verzweifeltes googln etc. muss ich mich doch langsam an euch wenden. Ich weiss es ist Freitag und jeder will langsam Feierabend machen wär aber trotzdem schön, wenn sich noch jemand finden würde der mir bei meinem Problem helfen kann ;-)

Folgendes:

<div style="float: left; width: 200px; height: 100%; overflow: scroll;">Menü</div>

<div style="height: 100%;">Content</div>

<div style="clear: both;"></div>

<div style="height: 40px;">Footer</div>

So sieht bisher mein Code aus. Bzw ein Beispiel meines Codes da bei mir noch php etc mit drinne verankert ist, dass mein Problem 100% nicht auslöst.

Der Footer soll ständig unten am Rand angezeigt werden. Das vertikale Scrollen am Browserfenster soll nie auftauchen. Das Design soll sich stattdesses sich an dem Browserfenster anpassen.

Leider setzt der mein Menü und Content auf 100% und den Footer unten drunter (was ja prinzipel richtig ist) Sollte aber 100% - Footer sein damit es mit dem Fenster bündig ist.

Bin Dankbar für eure Hilfe.

Gruss L0rdseth

[Aiun]

Antwort: geht nicht.

theoretisch kennt html kein 100% höhe, generell nicht. Das es bei dir überhaupt funktioniert liegt am Mitleid der Browser-Entwickler und einiger Kompabilitäten.

Prozent minus Pixel geht nicht. das könntest du höchstens mittels Javascript erzeugen. ein Margin im Content-Div wäre auch möglich, über dem dann absolut positioniert der Footer liegt.

ich hoffe es hilft

[JHPML]

wenn der footer immer unten hängen soll:

dann einfach als zusätzlichen style (css im footer) folgendes zuweisen:

position: relativ;

left: 0;

right: 0;

bottom: 0;

das funktioniert mit fast allen üblichen browsern: ab IE 5 ab Opera ab 4.5 ab Netscape 5 und bei allen! anderen browsern verhält sich so ähnlich wie ein FRAME kann sein (je nach inhalt) das du menue und content in nen container packen must und overflow: scroll; zuweisen musst was bei Opera 7 hässliche halbe scrollbars macht aber bei anderen browsern kein problem ist.

<div style='margin-bottom: 40px; overflow: scroll;'>

<div style="float: left; width: 200px; height: 100%; overflow: scroll;">Menü</div>

<div style="height: 100%;">Content</div>

</div>

<div style="height: 40px; position: relativ; left: 0; right: 0; bottom: 0;">Footer</div>

die 100% währen in dem falle nicht 100% vom bildschirm sonder 100% vom übergeordneten element also bildschirm - 40px (was ja gewollt war oder?)

PS: füge lieber ein externes stylesheet ein!

(das geht mit <link rel='stylesheet' type='text/css' href='css/mein.css'>)

Bearbeitet 8. Februar 2009 von JHPML

[l0rdseth]

Ist leider noch nicht ganz richtig. Aber immerhin glaube ich schonn einen Schritt weiter als ich.

Ich muss immer noch runterscrollen um den Footer zu sehen. Denn der ist weiterhin noch unter dem Content, da dieser noch 100% des Browserfensters bekommt.

Aber das Scrollen funktioniert :-D

Also wenn ich das jetzt richtig sehe, ist einfach nur noch das Menü/Content zu hoch ansonsten sollte es schon richtig sein.

[JHPML]

statt position: relativ;

einfach position: fixed;

nehmen!

[JHPML]

das margin-bottom: 40px;

ist bei position: fixed;

wichtig da sonst dein content um 40px verkürzt wird

(also der iss noch da aber den siet man nicht mehr)

[JHPML]

Zitat von mir:

das funktioniert mit fast allen üblichen browsern:

ab IE 5

ab Opera ab 4.5

ab Netscape 5

und bei allen! anderen browsern

^lol die sind ganz bestimmt nicht mehr "üblich"

:cool:

(korrigiere: ab opera 6)