• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Footer ist zu weit unten!

R

ra9na

Neues Mitglied
Hallo!

Ich sitze hier schon seit Stunden und komme nicht auf die Lösung des Problems!
Habe schon alle Tuts durch z.B: http://peterned.home.xs4all.nl/examples/csslayout1.html, die mit "Sticky footer" usw. sich beschäftigen. Das Problem bei mir ist, dass der Container bei 100% Höhe schon zu groß ist, und somit schon ein Scrollbalken eingeblendet wird. Das heißt, ich muss scrollen um den Footer zu sehen, obwohl der Inhalt der Seite nicht über die Höhe des Fensters hinausgeht. Betrifft aber nur meine Seite. Bei anderen Seiten klappts so ohne Probleme.
Ich übersehe was garantiert, aber vllt kann mir ja einer von euch sagen, was:

css:
html,body {
margin-top: 0;
margin-bottom: 0em;
padding-top: 0;
padding-bottom: 0em;
margin-left: auto;
margin-right: auto;
height: 100%;
}

#container {
width: 1197px;
min-height: 100%;
position: relative;
padding-bottom: 1em;
overflow: hidden;
}

#header {
margin-top: 0px;
margin-bottom: 0px;
width: 1197px;
float: left;
height: 80px;
}

#page_content {
overflow:auto;
margin-top: 30px;
}

#footer {
clear:both;
width: 1197px;
bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
position: absolute;
height: 1em;
}

html (kein Code, nur schematische Abbildung der relevanten divs):

<body>
<div container>
<div header></header>
<div page_content></page_content>
<div footer></footer>
</container>
</body>

Was mach ich falsch?
 
Zuletzt bearbeitet:
Werbung:
Das ist kein HTML-Code. Da fehlt jegliches Grundgerüst, auch sind praktisch alle HTML-Elemente falsch geschrieben. Schau dir bitte erstmal die Grundlagen dazu an.
 
Das soll auch kein html sein!
Das war nur zu veranschaulichung, wie die divs verschachtelt sind...
Habs vergessen zu erwähnen... wollte aber auch nicht den Rest posten, das das nur unnötig wäre.
 
Zuletzt bearbeitet:
Werbung:
Hmm.... #content hat keine Mindesthöhe, nur #container. Aber wenn ich den wegmach, knallt mir der Footer ja oben an den #header...
Ich habs mittlerweile soweit gebracht, dass wenn ich bei
#page_content {
padding-bottom:40px; /* Height of the footer */
}

einstelle und bei

#footer {
position: absolute;
bottom:0em;
width:100%;
height:40px; /* Height of the footer */
}

, dann hat die Seite exakt die Höhe von 100%. Mache ich den Footer nur etwas schmaler, dann wandert der Footer insgesamt nach unten und man muss wieder scrollen. Ich versteh aber überhaupt nicht, was das soll... schließlich ist das doch der Sinn von den %-Angaben...
Kann da jemand Licht ins Dunkel bringen?

P.S:
Hier mal das Problem verbildlicht:
1. Mit 20px Höhe und nicht ganz unten (der dunkel rote Streifen soll ganz unten sein, das blaue ist nur "Debugging")
1.jpg

2. Mit 40px Höhe, alles so wie es soll (eigentlich nicht, denn der dunkelrote Streifen sollte ganz unten sein... jemand ne Idee?)
2.jpg
 
Zuletzt bearbeitet:
wenn du beim #container die mindesthöhe raus nimmst passt sich dieser dem Inhalt an.
Also würde ich mal mindesthöhe rausnehmen und text in den #container rein tun.
 
Werbung:
Wenn ich die rausnehme, dann ist der Footer aber nich immer fest unten an der Seite. Ich möchte, dass der Footer immer am unteren Rand der Seite ist. Wenn die Seite länger ist wie die Höhe vom Browserfenster, dann soll der Footer durch Scrollen ans Ende der Seite erscheinen, der soll also nicht immer am Ende des sichtbaren Bereichs schweben... Ich hoffe, ich habs einigermaßen gut erklären können.
Also eigentlich wie hier: CSS Layout - 100% height
Oder hier: Make a Footer Stick to the Bottom of the Page
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben