Hallo Gemeinde,
ich habe folgendes Anliegen:
Ich benötige einen wrapper welcher sich je nach Inhalt nach unten ausdehnt.
Unten einen sticky footer welcher immer am unteren Rand der Seite klebt.
Egal wieviel Inhalte im wrapper drin sind und welche Bildschirm-Auflösung man benutzt.
Der wrapper muss allerdings über den footer drüberstehen, der footer beinhaltet später lediglich ein Hintergrundbild welches vom wrapper dann überdeckt wird.
Problem a) Bei mehr Inhalt wird der wrapper beschnitten sobald die 100% Höhe erreicht sind
Problem b) Der Footer bleibt beim scrollen an der Ausgansposition, sprich wenn gescrollt wird klebt er nicht weiter am unteren Rand sondern bleibt wo er ist. Kommt auf die Bildschirmauflösung an, bei meinen 1050px ist das Problem deutlich erkennbar.
PS: Kommt der Text direkt in den wrapper, lösen sich die Probleme auf. Warum konnte ich leider noch nicht rausfinden.
Vielen Dank für jegliche Antwort!
ich habe folgendes Anliegen:
Ich benötige einen wrapper welcher sich je nach Inhalt nach unten ausdehnt.
Unten einen sticky footer welcher immer am unteren Rand der Seite klebt.
Egal wieviel Inhalte im wrapper drin sind und welche Bildschirm-Auflösung man benutzt.
Der wrapper muss allerdings über den footer drüberstehen, der footer beinhaltet später lediglich ein Hintergrundbild welches vom wrapper dann überdeckt wird.
HTML:
<body>
<div id="wrapper">
<div id="top">Bereich top</div>
<div id="content">
<h1>Überschrift</h1>
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor<br />
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo<br />
duo dolores et ea rebum.<br />
<br />
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor<br />
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna<br />
aliquyam erat, sed diam voluptua.<br />
<br />
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus<br />
est Lorem ipsum dolor sit amet.<br />
<br />
</div>
</div>
<div id="sticky-footer"></div>
</body>
Code:
@charset "utf-8";
/* CSS Document */
*
{
margin:0px;
padding:0px;
border:0px;
}
html, body
{
width:100%;
height:100%;
font-family:Verdana, Arial;
font-size:12px;
}
#wrapper
{
width:960px;
min-height:100%;
height:auto !important;
height:100%;
position:relative;
left:50%;
margin-left:-480px;
z-index:10;
background-color:#000;
color:#FFF;
}
#top
{
width:960px;
height:250px;
float:left;
background-color:#F00;
font-size:36px;
}
#content
{
width:860px;
height:auto;
float:left;
padding:30px 50px 30px 50px;
color:#FFF;
}
#sticky-footer
{
width:100%;
height:374px;
background-color:#096;
z-index:1;
position:relative;
top:-374px;
}
Problem a) Bei mehr Inhalt wird der wrapper beschnitten sobald die 100% Höhe erreicht sind
Problem b) Der Footer bleibt beim scrollen an der Ausgansposition, sprich wenn gescrollt wird klebt er nicht weiter am unteren Rand sondern bleibt wo er ist. Kommt auf die Bildschirmauflösung an, bei meinen 1050px ist das Problem deutlich erkennbar.
PS: Kommt der Text direkt in den wrapper, lösen sich die Probleme auf. Warum konnte ich leider noch nicht rausfinden.
Vielen Dank für jegliche Antwort!