Header/Footer Problem

Semi8 · #1 (**permalink**) 28.08.2013, 09:56

Hallo zusammen,

ich habe ein kleines Problem bei dem Layout meiner Website.
Ich möchte einen Header, einen Footer sowie einen Inhaltsteil haben. Der Header soll über die komplette Seitenbreite gehen. Der Inhalt und der Footer sollen jedoch beide eine fixe Breite haben. Nun habe ich versucht dieses Problem mit einem Wrapper zu lösen. Dieser steht außerhalb des Headers und umschließt somit den Inhalt und den Footer. Da der Wrapper (um den Footer am Ende der Seite zu halten) eine Höhe von 100% haben muss, verschiebt sich der Footer um die 300px Höhe des Headers nach unten, was natürlich unschön ist.
Meine eigentliche Intention ist das der Footer immer am Ende der Seite steht und bei längeren Seiten nur sichtbar ist wenn man ganz nach unten scrollt.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>

* {
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
}

header {
    height: 300px;  
    width: 100%;
    background: #F00;
}

#wrapper { 
    position: relative;
    height: 100%;
    margin: 0 auto; 
    width: 700px; 
}



footer {
    background: #00F;
    height: 100px;
    position: absolute;
    width: 100%;
    bottom: 0;
}
</style>
</head>
    <header>
    </header>
        <div id="wrapper">
            <section>
            Cusaperi nosaniendam, simoluptam quost, et quati dolor aut ma consedi volorro et pererio temquis dolum fugiaspellam quaerum corio. Itiniti illeceperi audae sam fuga. Ut rem rem ilicimp elentet laborum andentibus plaut adi comniet elis porrorum ea vid quae. Nequia alit fuga. Lupis aliquam, utam, atatenis est esto eossit que latatae cuptati consequam con num is velitiore comnim il int at estrume magnimus, tem fuga. Nequidus ium et et et officieniet quoditi unt offictate elit unt que imilit ium endit vit andio quam ut quis ut volum quo mil ium voluptatum ut occust la veriore voluptassit quae consequat ipsumqu ossinci enihiliquat ad que dolupiet laborae culpa conse iduntem qui debitem porenec ercius, untoreh enimet volorep edictur mo berchilitio eost rerumquo odignatur aut et isquia sumquidest quis qui necea sit verumqui optur, ex erchici mustia alitinis veliatus et, officias acienda nosant.
Evel iligniandes as et voluptatus, oditatur asped mo qui il magnihil ilitatis reium asped ut de latur ab id maximi, volesequate pernatis dolorro et andae estiis net, que sum idem quibusda nestrunt por sequas modionse exeriasped est od qui core pa ipit quunt pratem eaquoditam aliqui undunt quas alit que nobis endit ent venis es nestrum et, quae voluptatis erumet autentur, alitate quam, erumquam quidunt magnim re, sint ducient quias ullam quibus eos nita aut exeribe arumquunt eveleste vel iliquidis volupta spelestem iumet acias aut rest voluptius magnatem. Ucienias doluptatur, ommos delendae. Ihilluptas sunt ea autecaturepe consedi pictore aut evel mo ventist, inis denieni magnatus dolupta tionsed eossimuscid quistem aut dolor autenitas nobis in conem. Neque voluptati temquatum consed qui tecepelene velluptati bearum qui corporehenet minum que volor re non rae. Cias doluptius atemporibus, que dolestia ni cus dolleceaquam volora dolo te ni as est que estet et doluptur, nus aut il im raerum apientiosam, tem labori velique que eume omnime vidunt fugianis nus, quasperum venim fugitat esciusdam sitem faccuptatur? Elendi con corem a volumqui tecae eos modi cullit, conseque sit et pa quameni hillorio blaborro berupic ipsandebis quo te occus sequian dernat mil maiorehenimo blaci
            </section>
            <footer>
            </footer>
        </div>
<body>
</body>
</html>

Thielo · #2 (**permalink**) 28.08.2013, 10:18

Wenn du schon neue Elemente wie "header" oder "footer" nutzt, solltest du auch den HTML5-Doctype nutzen.

Zur Lösung deines Problems: Sticky-Footer ist das Zauberwort. (vgl. Sticky Footer | CSS-Tricks)

lottikarotti · #3 (**permalink**) 28.08.2013, 10:25

Hallöchen,

auf Anhieb fällt mir nur folgendes ein:

- Flexibler Footer

Viele Grüße,
lotti

explanator · #4 (**permalink**) 28.08.2013, 10:31

Bitte keine Crosspostings erstellen -> Header/Footer Problem

Semi8 · #5 (**permalink**) 28.08.2013, 10:55

Entschuldigt das Crossposting.

Diese Lösungen haben mir beide nicht weitergeholfen. Mein Wrapper bwz. mein Inhalt soll eine feste Größe besitzen und nicht je nach Fenstergröße zentriert werden. Daher funktioniert der flexible Footer nicht...

Gibt es noch weitere Ideen?

lottikarotti · #6 (**permalink**) 28.08.2013, 11:08

Morgen,

Zitat:

Zitat von Semi8

Diese Lösungen haben mir beide nicht weitergeholfen. Mein Wrapper bwz. mein Inhalt soll eine feste Größe besitzen und nicht je nach Fenstergröße zentriert werden. Daher funktioniert der flexible Footer nicht...

Das einzige was in meinem Beispiel zentriert wird, ist der Container für den Inhalt und der Footer. Das lässt sich aber problemlos anpassen. Ansonste passt mein Beispiel (meiner Meinung nach) auf deine Beschreibung - also entweder hast du uns Informationen vorenthalten oder aber du bastelst mal ein lauffähiges Beispiel (mit Inhalt innerhalb des <body>-Elements!!) zusammen und stellst es online.

Viele Grüße,
lotti

Semi8 · #7 (**permalink**) 28.08.2013, 11:11

Nein das Prinzip ist genau so. Du hast schon recht, der Container für Inhalt und Footer ist der einzige der zentriert ist und eine feste Pixelbreite hat. Dieses Prinzip soll auch so bleiben, es soll lediglich der Footer richtig funktionieren.
Vielleicht steh ich grade auf dem Schlauch aber wie kann ich das "problemlos anpassen"?

lottikarotti · #8 (**permalink**) 28.08.2013, 11:20

Morgen,

Zitat:

Zitat von Semi8

Nein das Prinzip ist genau so. Du hast schon recht, der Container für Inhalt und Footer ist der einzige der zentriert ist und eine feste Pixelbreite hat. Dieses Prinzip soll auch so bleiben, es soll lediglich der Footer richtig funktionieren.
Vielleicht steh ich grade auf dem Schlauch aber wie kann ich das "problemlos anpassen"?

Dann beschreibe was bei dir nicht richtig funktioniert - ich kann deine Gedanken leider nicht lesen. Bei mir sitzt der Footer am unteren Ende der Seite bis der Inhalt mehr Platz benötigt. Dann wird der Footer nach unten verschoben.

Viele Grüße,
lotti

explanator · #9 (**permalink**) 28.08.2013, 11:39

Wahrscheinlich hast du die margins nicht an deine Verhältnisse angepasst oder etwas anderes übersehen, denn so wie lottikarotti es gezeigt hat ist das gängige Vorgehen in diesem Fall. Bitte zeige uns dann mal deinen Code, den du verwendest hast.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Font der Überschrift ändern (Problem)	artist	CSS	2	07.12.2007 10:01
Design zu CSS/HTML verarbeiten - Problem häufen sich.	Grafikamateur	CSS	2	06.08.2007 09:57
Problem mit WordPress und dem Bilder Upload	Maxefix	Serveradministration und serverseitige Scripte	0	19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 17:39
Problem mit einem CSS Layout	nARC	CSS	20	21.05.2005 06:28