✔ Problem mit footer

lisa5 · 15. Januar 2010

Hallo,
ich bin gerade dabei eine Homepage mit html zu erstellen und möchte das Layout mit css programmieren. Leider kenne ich mich nicht so gut in css aus und habe das Problem, das mein Footer breiter ist als der restliche Teil der Seite. Zudem möchte ich, dass der Footer ganz unten auf der Seite steht. Wenn mein Text für #content länger ist und man scrollen muss, steht der Footer nicht ganz unten auf der Seite, sondern bleibt immer an der gleichen Stelle. Kann mir bitte jemand helfen?

Code:

		html, body {
		height: 100%;
		}

		body {
		margin:0;
		padding:0; 
		background:gray;
		font: 100% Arial, Helvetica, sans-serif;}

		*{
		margin:0;
		padding:0;
		}

		#container {
		position:relative; 
		width:750px;
		margin:0 auto;		
		height:100%; 
		min-height:100%; 
		}
					
		#content {
		height: auto;
		padding-left: 2em;
		margin: 0 auto -4em;
		padding-right: 2em;
		padding-bottom:5em; 	
		}
				
		#footer {
		position:absolute;
		bottom:0; 
		width:100%;
		border-top:2px double #FFFFFF;
		padding:1em;
		margin:0;	
 		}

Maik · 15. Januar 2010

Hi,

dein Vorhaben wird folgendermaßen umgesetzt, damit der Footer bei zunehmenden Inhalt nach unten geschoben, und nicht breiter wie der umschliessende DIV-Block #container angezeigt wird:

HTML-Code:

HTML:

<body>
    <div id="container">
        <div id="content">content</div>
        <div id="footer">
             <p>footer</p> <!-- Siehe hierzu meinen Kommentar im CSS-Code -->
        </div>
    </div>
</body>

CSS-Code:

CSS:

* {
        margin:0;
        padding:0;
}

html,body {
        height:100%;
}

body {
        background:gray;
        font: 100% Arial, Helvetica, sans-serif;
}

#container {
        position:relative; 
        width:750px;
        margin:0 auto;			
        min-height:100%;  /* Mindesthöhe für standardkonforme Browser wird zuerst genannt */
        height:auto !important; /* auto-height mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height:100%-Deklaration ignorieren */
        height:100%; /* "Mindesthöhe" in IE6 */
}
					
#content {
        height: auto;
        padding-left: 2em;
        margin: 0 auto -4em;
        padding-right: 2em;
        padding-bottom:5em; 	
}
				
#footer {
        position:absolute;
        bottom:0; 
        width:100%;
        border-top:2px double #FFFFFF;
}

#footer p { /* Diese Erweiterung verhindert, dass die ursprüngliche padding:1em-Deklaration für #footer nicht gemäß dem CSS-Boxmodell zur width:100%-Deklaration hinzuaddiert wird, wodurch der Footer breiter angezeigt wurde */
        padding:1em; 
}

Falls du an weiteren möglichen "Ausbaustufen" des Seitenkonzepts interessiert sein solltest, empfehle ich dir mein CSS-Tutorial CSS-Layout mit 100%-Höhe

mfg Maik

✔ Problem mit footer

lisa5

Grünschnabel

Maik

Neue Beiträge