HTML/CSS CSS - relative Box ausrichten

[XadreS]

Hallo,

habe gerade ein kleines Problem mit einem Design.
Und zwar habe ich insgesamt fünf Boxen.

Box [B]main[/B] - Hauptbox um die Seite zu zentrieren. Höhe 100%

Box [B]header [/B]- Hier ist der Header drin - feste Höhe
Box [B]navigation [/B]- Muss nicht beachtet werden
Box [B]content [/B]- Hier steht der Text drin - Höhe ist variabel
Box [B]footer [/B]- Footer halt - feste Höhe

Die Box main ist absolut ausgerichtet und beinhaltet die drei anderen Boxen header, content und footer. Diese sind jeweils relativ ausgerichtet.

Soweit funktioniert auch alles. Ich möchte allerdings die Box footer immer am Ende der Seite haben, also ganz unten. Dies funktioniert momentan leider nicht, da ich der Box content keine richtige Höhe zuweisen kann.

Mit height: 100%; bei der content Box funktioniert es leider nicht.

Hier mal etwas Code:

HTML-Datei

<div id="main">
<div id="header">
 <div id="navigation"></div>
 </div>
 <div id="content"></div>
 <div id="footer"></div>
 </div>

CSS-Datei

#main {
position: absolute;
top: 0px;
left: 50%;
margin-left: -475px;
min-height: 100%;
width: 950px;
}
#header {
position: relative;
top: 0px;
height: 200px;
width: 950px;
}
#navigation {
position: relative;
top: 157px;
left: 10px;
width: 800px;
height: 38px;
}
#content {
position: relative;
top: 0px;
left: 0px;
width: 930px;
min-height: 500px;
// Diese Größe müsste quasi 100% sein
}
#footer {
position: relative;
top: 0px;
left: 0px;
width: 930px;
height: 30px;
}

Hoffe, hier kennt jemand eine Lösung für mein Problem.

Grüße

 

[theHacker]

Moin.

Ich hab zwar grad keine Zeit, deinen Code durchzugucken, aber vielleicht läufst du mit float-Boxen besser und das löst dein Problem. Würde so in etwa aussehen:
https://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm

Eine Erklärung findest du hier:
https://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss

Hoff, das hilft dir erstmal weiter.

 

[perlini]

Spontan würde ich sagen, daß du dem footer statt "top:0px" die Eigenschaft "bottom:0" zuweist.

 

[Renegade]

Spontan würde ich sagen, daß du dem footer statt "top:0px" die Eigenschaft "bottom:0" zuweist.

Jein. Wenn "content" die volle Höhe hätte, würde das funktionieren. Das Problem liegt aber eher darin, dass "content" nicht die volle Höhe einnimmt.

 

[XadreS]

[...]

Hilft mir leider nicht wirklich weiter.
Die Fußzeile zu integrieren ist kein Problem! Nur möchte ich, dass diese immer am untersten Rand der Seite dargestellt wird. Bei einem Inhalt, der lang genug ist und einen vertikalen Scrollbalken erzeugt ist das schon so, aber ich möchte es der Ästethik wegen auch bei Inhalt haben, der kürzer ist.

Vielleicht mal ein Screenshot um es zu verdeutlichen:



Bei meiner Auflösung passt es fast, aber gerade bei größeren Auflösungen etc sitzt der Footer dann an der falschen Stelle. Ich will den halt nicht so im Raum schweben haben, sondern immer am Ende des Browserfensters.

EDIT:
bottom: 0px hatte ich schon versucht, das hat leider nicht funktioniert.

Wenn content die volle Höhe hätte? Hatte mal 100% zugewiesen, das hat aber keine Änderung gebracht. Und ich weiß ja nicht, wieviel Pixel die volle Höhe ist.

content kann ich meinetwegen auch gar keine Höhe zuweisen, das wär kein Problem.

 

[x3ntar]

Probiers mal damit:

#footer
{
  position: absolute;
  bottom: 5px;
  left:50%;
  margin-left:-465px;
  width:930px;
  height:30px
}

Eventuell aus dem Main-Div rausnehmen

 

[XadreS]

Das funktioniert zwar, aber nur wenn der Inhalt eine feste Größe hat. Sobald der Inhalt größer ist, so dass ein Scrollbalken erscheint, liegt der Footer über dem Inhalt und wandert nicht weiter mit.

 

[XadreS]

Ich hab die Lösung gefunden.

Der Tip

Eventuell aus dem Main-Div rausnehmen

war trotzdem brauchbar. Nur statt absolut muss ich den footer relative ausrichten, jetzt funktioniert es.

Danke an euch alle

 

[x3ntar]

Bitte ;-)

Du kannst auch mit anderen Formen, wie zB static und so rumprobieren.
CSS ist ziemlich genial.
Leider musste ab und zu wegen W3C und Cross Browser aufpassen...

 

[XadreS]

Ja CSS ist wirklich genial.

Musste leider feststellen, dass es doch nicht geklappt hat. Aber jetzt auch egal, jetzt sitzt es immer unter dem Inhalt (content). Sieht auch noch ok aus.

Mit der Lösung, die ich gepostet hatte, sitzt der Footer immer ganz oben.

Falls doch noch wer eine Idee hat, kann er diese gerne noch posten. Ansonsten lass ich das jetzt so.

 

[kbot]

also ich benutze für Footer immer position:fixed; da bleibt der Footer immer an seinem Platz, egal ob gescrollt wird oder nicht...

also meiner sieht z.B. so aus:

#footer {
	position: 			fixed;
	width: 			100%;
	height: 			25px;
	top: 				auto;
	bottom: 			0;
	left: 			0;
	}

wie man sieht, der ist direkt am unteren Rand, und geht über die komplette Breite, bei dir müsstest halt eben die Breite (width), die Höhe (height) den Abstand nach unten (bottom) und den Abstand nach links (left) nach deinen Wünschen abändern

hab jetzt allerdings den Thread nur überflogen, bitte nicht böse sein, wenns nicht ganz das ist, was du suchst

 

[theHacker]

fixed interpretiert der IE afaik aber nicht.

 

[kbot]

IE8 und aufwärts können fixed
nur halt die älteren könnens nicht...

[OffTopic]
und ich bin nach dem Umbau meiner Seite einfach der Meinung, wer mit nem älteren surft is doof

der bekommt eben ne Meldung (versteckt in CC)

Ihr Browser ist veraltet, bitte aktualisieren Sie auf Internet Explorer 8 oder nutzen sie moderne Browser wie z.B. Chrome oder Firefox um diese Seite korrekt angezeigt zu bekommen.
Bis dahin können Sie auch noch die alte XYZ-Seite benutzen, welche nicht mehr aktualisiert wird.

die alte Seite war halt noch mit Frames aufgebaut und hatte kaum CSS drin ^^
[/OffTopic]