CSS Footer immer unten am Browserfensterende

[Twisterking]

Hi @ all!

Kämpfe mich seit Stunden mit folgendem Problem herum:

Habe auf meiner Page in etwa folgenden Aufbau (hoffe es is halbwegs klar! ):

Nun habe ich schon einige Tuts wie zB dieses hier durch, aber ich schaffe es einfach nicht, dies auf meinen Aufbau zu übertragen!

Problem ist meistens, dass ich dem Bereich links keine height von 100% geben kann (das ganze hat einen hintergrund und der darf nicht anch den 5 zeilen da oben aufhören sondern soll bis runtern zum footer gehen!) ... sollte ich das dann doch mal schaffen, hab ich wieder irgendwelche Fehler ... entweder es wird die allg. body - BG Farbe untenrum noch angezeigt oder andere unerklärliche Fehler!

Anyway ... hoffe es is klar was mein Prob is ... und ich hoffe auch mir kann wer helfen!

Danke im Voraus,

mfg
Twist

 

[Pyroplan]

wo ist das problem?
ein div mit header...

ein div mit inhalt (tabelle links und rechts spalten)

und dann ein div für den footer?

header und footer gibst du height = fest und den inhalt auf auto, damit dieser sich der fenstergröße/text anpasst.

und fertig bist du oO

 

[Twisterking]

Problem is dass der content ja nicht immer gleich viel is!
Also rutscht der footer dann bei zu wenig content nach oben! Das will ich aber eben vermeiden!
Guck dir doch bitte kurz das verlinkte Tut an, da sieht man auf 2 kleinen Pics was ich meine!
und height angeben is eben so ne Sache! in Pixel is in diesem Fall nicht sinnvoll, und % will auch nicht immer so wie ich mir das vorstelle! -.-

 

[Pyroplan]

also bei zu wenig content sollte der footer eig nur bis zu dem menü gehen, oder da wo der text halt eben endet.

allerdings kannst du auch ne mindest-höhe eingeben -> glaube das war min-height oder height-min

damit sollte das problem für die weg sein, da es nicht kleiner als die höhe geht und joar^^

 

[Twisterking]

Alllllles schon probiert!
Ja da will ich den footer eben nicht haben ... nicht @ text ende sondern eben immer unten am Browserfensterende! ^^
die min-height funzt bei mir mal und mal nicht ... kA was ich falsch mache!

 

[ChrisKam]

Lies dir das hier mal durch, das sollte helfen:

http://standards.webmasterpro.de/index-article-csslayouts.html

 

[QXARE]

Du musst zuerst alle Elemente außer den Footer Container in einen Wrapper geben.

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>

Die CSS Formatierung für obiges Markup:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -50px 0; /*-50px sind die Höhe des Footers */
    background: #000;
    width: 100%;
}

#footer {
    height: 50px;
    background: #FFF;
    width: 100%;
}

 

[Twisterking]

Danke @ tRIAS!

Jetzt habe ich aber wieder das problem, dass die riesen-table, die den content beinhaltet, nicht über den ganzen Bildschirm geht! Wie bekomme ich die nun auf volle Höhe?
height: 100%; ignoriert er mir völlig -.- kA wieso!

Edit: Auch interessant is, dass, wenn ich das Fenster aml so klein mache, dass ich scrollen muss um den ganzen content zu sehen, der footer vollkommen verschwindet!
Also die page hört dann ganz unten einfach auf, ohne footer!

Was mach ich nur falsch ... Ich verzweifle langsam an diesem shi*e CSS! -.-

 

[Backslash]

Spar' dir doch einfach die Tabelle und setz' es mit <div>s um.

 

[Twisterking]

und dann?
float: left und float: right ??
Wenn ich mcih richtig errinnere hab ich das versucht und das hat leider entweder gar nicht funktioniert oder hat komplett blöd ausgesehen! -.-

EDIT:
Gibts hier irgendwen der sich vll kurz die zeit nehmen könnte und mir einfach auf die schnelle ne html page bastelt wie in meiner Skizze im 1. Post?
Mir reicht schon Header, content mit der Table, die OBWOHL zu wenig content vorhanden is, bis runter zum footer geht, und eben Footer, der IMMER unten sitzen muss!
Ich wäre unglaublich dankbar wenn sich da jmd finden würde!
Is für einen der ein wikrlicher CSS Pro is whs eh nur eine Sache von 2 min!

 

[QXARE]

<div id="wrapper">
    <div id="header">Header</div>
    <div id="left">Linke Spalte</div>
    <div id="right">Rechte Spalte</div>
</div>
<div id="footer">Footer</div>

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -50px 0; /*-50px sind die Höhe des Footers */
    background: #000;
    width: 650px;
}

#header {
    width: 100%;
    height: 50px;
}

#left {
    width: 150px;
	height: 100%;
	background: #09F;
}

#right {
    width: 500px;
	background: #069;
}

#left, #right {
    float: left;
}

#footer {
    height: 50px;
    background: #FFF;
    width: 100%;
}

 

[Twisterking]

Habs jetzt zwar nicht getestet, aber <div> impliziert doch immer einen Zeilenumbruch oder etwa nicht?
Also kann man 2 div's nicht per float nebeneinander anordnen?! ^^

 

[QXARE]

Ja es ist ein Block Element dass eine neue Zeile benötigt, aber mit float wird das mehr oder weniger aufgehoben und die Elemente aneinandergereiht. Es geht...

 

[MiniM3]

Damit float gut funktioniert musst du höhe und breite angeben.
so hast du die divs unter kontrolle.
wenn du keine feste maße gibst sind die divs so gross wie der inhalt in den divs.

es gibt ausserdem den css befehl für divs display:inline; -> so kannst du divs neben einander packen.
aber float macht es auch, ich würde es mit float machen.

um die divs begreifen zu können musst du sie auch sehen.
also am besten allen einen border verpassen und schauen wie und wo sie vershcoben sind.
allerdings gibt es auch nette addons für firefox: "web developer" oder "firebug" die dir beim arbeiten sehr helfen können.

jetzt mal ein beispiel:
du willst 3 div fenster nebeneinander haben (so wie in deiner zeichnung)
und diese divs sind in einem übergeordneten div.
also wenn der übergeordnete div 600px breit ist kannst du die 3 inneren divs jeweils auf 200px breite und höhe und float:left setzen und sie werden alle nebeneinander stehen. fügst du die 3 nochmal ein hast du 6 innere divs die sich in 2 reihen mit jeweils 3 divs darstellen.
wichtig! : border padding margin wird immer zu der breite hinzugefügt, also 200px fenster mit 1px border drum herum ist 202px breit und passt natürlich keine 3 mal in ein 600px div.

viel erfolg

 

[QXARE]

Man kann eine Breite vergeben damit man das Floaten unter Kontrolle hat, es ist aber kein Muss. Auf Höhenangaben kann man verzichten.

Es ist auch nicht display: inline sondern inline-block was das Aneinanderreihen von Block Elementen ermöglicht, was aber in verschiedenen Browsern wie IE und Firefox 2 Probleme bringt.

Man kann jetzt wirklich 21308 Beiträge dazuschreiben. Das Markup und CSS was ich gepostet habe wurde auch getestet und nicht umsonst mit Hintergrundfarben formatiert, sodass man die Elemente sehen kann. Wenn das Testen (lediglich Kopieren und Ausführen) aber schon zu schwer ist, dann kann ich leider nicht mehr weiterhelfen.

 

[darkservant2]

Was passiert wenn man den Footer mit position:absolute; bottom:0px; platziert?

 

[QXARE]

Dann wird der Footer zwar am Ende der Seite platziert, ist der Inhalt aber länger als die Seite und man kann Scrollen, dann bleibt der Footer an der Position wo vorhin das Seitenende war.

 

[darkservant2]

Er sagt doch er will sie "immer unten am Browserfensterende" - je nach dem wie man das auslegt, ist das erfüllt
Er könnte auch noch ein fixed als Position nehmen - dann Scrollts halt mit.

 

[QXARE]

Ja, und der Content wird verdeckt...

 

[darkservant2]

Einen Tod muss man sterben...