[HaBo]

Dawen · 28.07.10, 16:59

Hallo !

Ich habe folgendes Problem

HTML-Code:

<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 ?

Kuttengeier · 28.07.10, 17:48

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

HaBo Ads

Dresko · 28.07.10, 23:25

Die Eigenschaft "min-height" könnte dir weiterhelfen.

shrax · 29.07.10, 15:22

Zitat:

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.

Dresko · 29.07.10, 16:12

Zitat:

Zitat von shrax

Floate am besten alle Elemente. Gib ihnen eine feste breite zb. 100%.
Diese müssten sich der lange des inhalts automatisch anpassen.

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.

Zitat:

Zitat von shrax

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.

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.

shrax · 29.07.10, 17:13

Zitat:

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.

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?

Zitat:

Mir ist kein moderner Browser bekannt, der 'min-height' nicht unterstützt. Sogar der IE ab Version 6 unterstützt diese Eigenschaft zumindest indirekt.

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

LaNdRiX · 29.07.10, 17:41

Zitat:

Zitat von shrax

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?

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...yout-erstellen
http://de.html.net/tutorials/css/introduction.asp

Empfehlung

28.07.10, 16:59	#1 (permalink)
Dawen Registriert seit: 19.08.04 Likes: 1	Header & Footer ausrichten Hallo ! Ich habe folgendes Problem HTML-Code: <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 ?

28.07.10, 23:25	#3 (permalink)
Dresko Registriert seit: 30.01.10 Likes: 1	Die Eigenschaft "min-height" könnte dir weiterhelfen. __________________ Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook -

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

28.07.10, 17:48	#2 (permalink)
Kuttengeier Registriert seit: 21.06.07 Likes: 3	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


HaBo Ads HaBOT

[HaBo]

Header & Footer ausrichten