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.
<!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>