nicht angemeldet
div-box-footer
Hallo zusammen!
Ich versuche meine Page mit einem "Div-Box-Layout" zu gestalten.
Hierzu soll es auch eine "Footer-Box" geben, die an den Content der Seite unten angehängt wird. Falls der Content in der Höhe weniger Platz benötigt wie vorhanden, so soll der Footer die Page auf die Seitenhöhe strecken.
An meinem Doctype möchte ich nichts ändern.
Hier mal mein minimiertes, exemplarisches Script:
die css-datei:
html {width:100%; height:100%; margin:0px; padding:0px;}
body {position:absolute; width:100%; height:100%;
margin:0px; padding:0px;}
/* divs */
#page {position:relative; width:760px; height:auto; min-height:100%;
margin:0px auto; padding:0px;}
(...)
#footer {position:absolute; bottom:0px; width:760px; height:20px;}
die html-datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
(...)
<div id="page">
(...)
<div id="footer">
<p>ich bin ein footer</p>
</div>
</div>
(...)
Ich hoffe, ihr könnt mir helfen!
Viele Grüße
Klaus
-
Hallo.
Ich versuche meine Page mit einem "Div-Box-Layout" zu gestalten.
Das Forum sagt: Löblich!
An meinem Doctype möchte ich nichts ändern.
Das Forum sagt: Bei diesem Doctype, löblich!
Ich würde an deiner Stelle mit float positionieren. Oder bist du auf relative / absolute Positionierung irgendwie angewiesen?
Dann dürfte dein footer kein Problem mehr sein.
MfG, Kungschu.
-
Hallo.
Ich versuche meine Page mit einem "Div-Box-Layout" zu gestalten.
Das Forum sagt: Löblich!An meinem Doctype möchte ich nichts ändern.
Das Forum sagt: Bei diesem Doctype, löblich!Ich würde an deiner Stelle mit float positionieren. Oder bist du auf relative / absolute Positionierung irgendwie angewiesen?
Dann dürfte dein footer kein Problem mehr sein.
MfG, Kungschu.
Erstmal danke für die rasche Antwort!
Das ganze habe ich auch schon mit float versucht. Leider bin ich jedoch an der Bedingung, dass der Footer für den Fall das weniger Inhalt wie Höhe da ist, die Seite strecken soll, gescheitert.
Wenn jemand Abhilfe hat, wäre ich dankbar!
-
Hallo.
Das ganze habe ich auch schon mit float versucht. Leider bin ich jedoch an der Bedingung, dass der Footer für den Fall das weniger Inhalt wie Höhe da ist, die Seite strecken soll, gescheitert.
"..die Seite strecken soll.."? Du meinst, der footer soll immer mindestens "am Boden bleiben"?
Vielleicht hilft dir http://www.themaninblue.com/experiment/footerStickAlt/ weiter.MfG, Kungschu.
-
Vielleicht hilft dir http://www.themaninblue.com/experiment/footerStickAlt/ weiter.
MfG, Kungschu.
Vielen vielen Dank!
Das hat mir sehr weitergeholfen!
Viele Grüße
Klaus-
hi,
auf diesem Link war bug, habs getetstet, dies ist besseres beispiel, finde ich:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>sticky footer</title>
<style type="text/css">
body,html{
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#000;
background:#FFF;
height:100%;
padding:0;
margin:0;}
#page{
width:800px;
padding:0;
margin-top:0;
margin-right:auto;
margin-bottom:110px;
margin-left:auto;
position:relative;
top:0;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */ }
#header{
margin:0;
padding:0}
#cont{
margin:5px;
padding-bottom:160px;
height:auto !important;}
#footer{
width:100%;
margin:0;
padding:0;
position:absolute;
bottom: 0 !important;
bottom:-1px;
height:110px;}
#ib{
top:230px;
left:360px;
width:100%;
padding:0;
margin:0;
height:100px;
overflow:hidden; /*scroll*/
border:1px solid red;}
</style>
</head>
<body>
<div id="page" style="border:1px solid">
<div id="header" style="border:1px solid">
<p>header</p><p>header</p><p>header</p>
</div>
<div id="cont" style="border:1px solid">
<p>content</p>
<div id="ib">
<p>box box box box box box box box box box box box</p><p>box</p><p>box</p><p>box</p>
</div>
</div>
<div id="footer" style="border:1px solid">
<p>footer</p><p>footer</p><p>footer</p>
<p>(HTML/XHTML) Höhe von Divs? von muffin, 14.03.2007, 15:22</p>
</div>
</div>
</body>
</html>
-
-
-
-