nicht angemeldet
Seitenlayout soll höhig 100% od. mehr sein
Hallo zusammen,
Bin ein CSS-Neuling und habe folgende Frage. Was muss ich am untenstehenden Quellcode verändern:
Die Seite soll mind. 100% hoch sein, der Footer dabei am unteren Bildschirmrand. Wenns im "content"-div mehr Inhalt gibt und die Seite über 100% Höhe entspricht, soll am Browser-Hauptfenster normal gescrollt werden und sich der Footer mitbewegen.
Ich brings nicht hin. Wer kann mir helfen? Bitte keine "min-height". Vielen Dank schon mal!!
Gruss
Daniel
<!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>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color:#444444;
font-weight:bold;
font-family:Arial;
font-size:100%;
}
#apDiv1 {
height: auto;
width: 880px;
overflow: visible;
position: absolute;
visibility: visible;
z-index: 2;
background-image: url(http://www.guidoschraner.ch/new/_images/background.png);
background-color: #444444;
top: 0px;
left: 50%;
margin-left: -440px;
background-repeat: repeat-y;
}
#header {
position:relative;
left:40px;
top:0px;
width:800px;
height:235px;
z-index:4;
visibility: visible;
}
#content {
position:relative;
left:90px;
top:0px;
width:718px;
height:auto;
z-index:3;
overflow: visible;
visibility: visible;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
text-decoration: none;
letter-spacing: normal;
text-align: left;
vertical-align: top;
word-spacing: normal;
white-space: normal;
}
#footer {
position:relative;
width:880px;
height:107px;
z-index:2;
background-color: #999999;
overflow: visible;
visibility: visible;
top: 0px;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<div id="header"><img src="http://www.guidoschraner.ch/new/_images/header.png" alt="header" width="800" height="235" /></div>
<div id="content">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>
<p></p>
</div>
<div id="footer"><img src="http://www.guidoschraner.ch/new/_images/footer.png" alt="footer" width="880" height="107" /></div>
</div>
</body>
</html>
-
Hi Daniel,
Die Seite soll mind. 100% hoch sein, der Footer dabei am unteren Bildschirmrand. Wenns im "content"-div mehr Inhalt gibt und die Seite über 100% Höhe entspricht, soll am Browser-Hauptfenster normal gescrollt werden und sich der Footer mitbewegen.
du kannst dir ja mal anschauen, wie es hier realisiert wurde, dementsprechend kannst du ja dann dein
CSS anpassen.Ist das bsp. richtig?
Grüße aus H im R,
Engin -
Hi,
Die Seite soll mind. 100% hoch sein, der Footer dabei am unteren Bildschirmrand. Wenns im "content"-div mehr Inhalt gibt und die Seite über 100% Höhe entspricht, soll am Browser-Hauptfenster normal gescrollt werden und sich der Footer mitbewegen.
Ich brings nicht hin. Wer kann mir helfen? Bitte keine "min-height".
Bitte nicht bloedsinnigerweise die zur Loesung fuehrende Eigenschaft ausschliessen, weil du mit ihr nicht umgehen kannst ...
Die Loesung koennte in etwa so aussehen:
HTML 100% Hoehe geben, BODY 100% Mindesthoehe (100% echte Hoehe als Workaround fuer aeltere IEs, vor aktuellen Browsern natuerlich versteckt).
BODY relative positionieren, Footer darin dann absolute vom bottom positionieren [1]. Ueber entsprechendes margin-/padding-bottom des Hauptinhaltes dafuer sorgen, dass dieser sich nicht unter den Footer legt ...... und das ist's eigentlich auch schon.
[1] Funktioniert nicht in 5er-IEs. Wenn die auch noch beruecksichtigt werden sollen, dann zunaechst einen weiteren Div-Conatiner in Body einfuegen, und Footer innerhalb von diesem positionieren.
MfG ChrisB
-
-
Hoi Inita!
Das ist genau das wonach ich suchte! Super, herzlichen Dank!!!
Gruss aus Zürich
Danielhoi,
da ist die loesung:
http://inix.blogiem.lv/2007/07/25/8989.html
See Example!
Gruss,
Inita
-
