CSS Header & Footer ausrichten

D

Dawen

0
Hallo !

Ich habe folgendes Problem

HTML: 
<div id="page">
      <div id="head"></div>
      <div id="content"></div>
      <div id="footer"></div>
</head>

Nun soll der Header natürlich oben sein, dort packe ich Inhalt rein. Mein Footer soll immer unten sein. Auch hier packe ich Inhalt rein. Mein Content soll nun min. komplett von oben nach unten gehen unabhängig vom Inhalt. Ist dieser Container leer, so soll z.B. trotzdem der Container von oben nach unten gestreckt werden.

Ideen ?
 
Hallo Dawen,

die Div-Container sollten ja ohnehin untereinander sein. Vielleicht hilft dir bei der Lösung deines Problems diese Webseite weiter:

http://www.css4you.de/posproperty.html

Wenn dies nicht reichen sollte, oder du auch noch andere Browser ansprechen möchtest, kommst du wohl um JavaSkript nicht herrum.

Grüße,
Kuttengeier
 
Die Eigenschaft "min-height" könnte dir weiterhelfen.
 
<div id="page">
<div id="head"></div>
<div id="content"></div>
<div id="footer"></div>
</head>
Zum Vergrößern anklicken....




Wieso schreibst du das in den <head>? Dann wird es nicht angezeigt.
[hier dein doctype]
<html>
<head>
</head>
<body>
<div id="head"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Floate am besten alle Elemente. Gib ihnen eine feste breite zb. 100%.
Diese müssten sich der lange des inhalts automatisch anpassen.

Nutzt du Modernes HTML ist die einzige lösung min-height und max-height um #content immer in der gleichen höhe zu haben.
Der Footer ist so auch immer unten. Du kannst dich auch über die css eigenschaft "clear" bzw. als Beispiel "clear:both;" informieren zwecks des Footers.

min-height und max-height wird allerdings nicht von allen Browsern untersützt. JavaScript wäre hier auch eine möglichkeit. Doch viele Surfen ohne JavaScript.
Hierzu: hxxp://www.css4you.de/min-height.html

Meine lösung wäre "min-height" zu nutzen, und für Browser die dies nicht unterstützen zusätzlich ein kleines JavaScript zu schreiben das min-height auch für andere Browser einbaut. Das wäre auch von der Barreriefreiheit her von vorteil.

Ansonsten passt dich die größe immer die des Inhalts an.
 
shrax hat gesagt.:
Floate am besten alle Elemente. Gib ihnen eine feste breite zb. 100%.
Diese müssten sich der lange des inhalts automatisch anpassen.
Zum Vergrößern anklicken....
Wenn du 'width' auf 100% setzt, wird das Element so breit wie das Elternelement (in dem Fall so breit wie 'page') und der Inhalt passt sich an die Breite des Elementes an. Nicht umgekehrt.

shrax hat gesagt.:
min-height und max-height wird allerdings nicht von allen Browsern untersützt. JavaScript wäre hier auch eine möglichkeit. Doch viele Surfen ohne JavaScript.
Zum Vergrößern anklicken....
Mir ist kein moderner Browser bekannt, der 'min-height' nicht unterstützt. Sogar der IE ab Version 6 unterstützt diese Eigenschaft zumindest indirekt.
Und ich persönlich würde Browser, die nicht mindestens CSS2.0-kompatibel sind, sowieso nicht mehr supporten. Sonst bekommt man früher oder später noch wegen ganz anderer Dinge die Krise...

Ich würde dafür auch keine Browser-Chain per JS einbauen. Höchstens noch um die Höhe und Breite automatisch an die Auflösung des Benutzers anzupassen.
 
Wenn du 'width' auf 100% setzt, wird das Element so breit wie das Elternelement (in dem Fall so breit wie 'page') und der Inhalt passt sich an die Breite des Elementes an. Nicht umgekehrt.
Zum Vergrößern anklicken....
Verzeih vielleicht habe ich mich falsch ausgedrückt. Das das Element so breit wie die Seite wird meinte ich. Doch die länge passt sich ohne min-height dem Inhalt an. Da lieg ich doch richtig oder?

Mir ist kein moderner Browser bekannt, der 'min-height' nicht unterstützt. Sogar der IE ab Version 6 unterstützt diese Eigenschaft zumindest indirekt.
Zum Vergrößern anklicken....
Moderne Browser nicht, aber ältere. Doch ich denke das liegt beim Autor der Seite ob er sie auch für Leute die mit Steinzeitlichen Browsern unterwegs sind kompatible machen möchte. JavaScript wäre mit Conditional Comments für IE < IE 6 eben eine lösung.

http://www.css4you.de/min-height.html
 
Zuletzt bearbeitet:
shrax hat gesagt.:
Verzeih vielleicht habe ich mich falsch ausgedrückt. Das das Element so breit wie die Seite wird meinte ich. Doch die länge passt sich ohne min-height dem Inhalt an. Da lieg ich doch richtig oder?
Zum Vergrößern anklicken....

Ja, da liegst du richtig.

Folgende Links könntest du dir sonst nochmal zu Gemüte führen:

http://css.maxdesign.com.au/floatutorial/
http://www.andreas-kalt.de/webdesign/tutorials/css-layout-erstellen
http://de.html.net/tutorials/css/introduction.asp
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben