Seite am unteren Rand ausrichten

T

Transmitter

Erfahrenes Mitglied
Hi,

ich hätte gern sowas:


_________________

leerer Header, immer 100px hoch
_________________

eigentliche Seite,
dynamische Höhe

_________________ <- Seite endet am unteren Browserrand.

Also eigentlich benötige ich nur einen Footer, der immer am unteren Seitenrand ist, aber wachsen kann und nach oben immer min. 100px Platz hat.

Habe schon Threads wie diesen genutzt:
http://www.tutorials.de/forum/css/223590-positionierung-eines-divs-am-unteren-seitenrand.html
und die entsprechenden Layouts von Stu Nicholls angepasst. Aber die Footer können dort nicht mit dem Inhalt wachsen.

Hat da jemand eine Lösung?
Danke schon mal

Bye, Transmitter
 
Hi,

für den Footer mit dynamischer Höhe würde das CSS so lauten:
CSS: 
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
padding-top:100px;
background:#ccc; /* optional, um die Boxengrenzen bei zunehmenden Inhalt zu erkennen */
}

mfg Maik
 
Hi,

danke dir für deine schnelle Antwort.
Das sieht soweit ganz gut aus, nur kann die Seite leider nicht wachsen (also es kommt kein Scrollbalken wenn der Inhalt nicht mehr in den Browser passt).

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> No </title>

<style type="text/css">
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
padding-top:100px;
background:#ccc;
}


</style>

</head>

<body>
<div id="footer"> asfdasdf<br />
asfd<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf
</div> 
</body>
</html>
 
Über den Viewport hinaus lässt sich auch nicht nach oben scrollen.

mfg Maik
 
Nicht nach oben, ich will ja nach unten scrollen.

Bei mir läuft der Text einfach oben raus, ich hätte aber gerne, dass man dann nach unten scrollen kann, sobald der Inhalt zu groß wird für den Viewport.
 
Wenn ein Element am unteren Fensterrand ausgerichtet / positioniert wird, damit sein Inhalt nach oben wandert, lässt sich die Seite nicht nach unten scrollen, denn seine Startposition ist ja weiterhin im Viewport sichtbar.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück