webseite auf ganze anzeigehöhe erweitern
vlad
- css
Hi, wie bekomme ich es hin, dass die webseite vertikal mindestens so groß ist, wie der angezeigte Ausschnitt.
ich hab eine Webseite von der einige Dokumente kürzer sind als eine Anzeigeseite.
Ich hätte aber dennoch gerne den footer ganz unten, anstatt in der mitte.
das heißt, der body soll soweit vergrößert werden, dass er mindestens eine Anzeigeseite füllt.
struktur ist prinzipiell so:
body
div class=site_header
div class=site_body
div class=site_footer
/body
ich möchte halt bei seiten, die kleiner als der browser ist, trotzdem den footer ganz unten haben.
dazwischen soll mit site_body aufgefüllt werden
Hi vlad,
keinen Bock auf die SELFHTML Suche, wa? Ein möglicher Weg:
1. html, body auf 100% Höhe setzen.
2.
div class=site_header
und
div class=site_body
in einen Container legen und diesem 100% Mindesthöhe (100% per Hack oder Condition für IE6) geben. U.U. sind die beiden inneren DIVs dann auch gar nicht mehr nötig (kommt drauf an, was du noch so veranstaltest).
3.
div class=site_footer
relativ positionieren, ihm eine feste Höhe geben und einen negativen Rand nach oben, der gleich seiner eigenen Höhe ist.
cheers
Antipitch
Ich habs vorher mit verschiedensten Kombinationen aus height und min-heigt probiert.
Dein Vorschlag funktioniert aber auch nicht richtig.
bei kürzeren seiten gibts das Problem, dass das site_body nicht bis runter geht (trotz min-height:100%)
das neue, in dem site_header und site_body drin stecken, ist aber wirklich 100%
und bei längeren seiten, geht das site_body in den site_footer rein.
Hi vlad,
keinen Bock auf die SELFHTML Suche, wa? Ein möglicher Weg:
html, body auf 100% Höhe setzen.
div class=site_header
und
div class=site_body
in einen Container legen und diesem 100% Mindesthöhe (100% per Hack oder Condition für IE6) geben. U.U. sind die beiden inneren DIVs dann auch gar nicht mehr nötig (kommt drauf an, was du noch so veranstaltest).
div class=site_footer
relativ positionieren, ihm eine feste Höhe geben und einen negativen Rand nach oben, der gleich seiner eigenen Höhe ist.cheers
Antipitch
Hi,
Dein Vorschlag funktioniert aber auch nicht richtig.
willst du mit mir wetten?
bei kürzeren seiten gibts das Problem, dass das site_body nicht bis runter geht (trotz min-height:100%)
dann hast du irgendwas falsch gemacht.
und bei längeren seiten, geht das site_body in den site_footer rein.
wenn du Textinhalte höher als 100% minus Höhe des footers hast: klar. Gib deinem site_body einfach'n padding nach unten. Du willst ja vermulich eh nicht bis direkt auf deinen footer schreiben...
Was siehst du(?):
CSS:~~~css
html, body {
height:100%;
margin:0;
padding:0;
border:0 none;
}
#wrapper {
min-height:100%;
background-color:yellow;
}
#footer {
position:relative;
height:20px;
margin-top:-20px;
background-color:black;
}
HTML:~~~html
<!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" lang="de">
<head>
<title>Test</title>
</head>
<body>
<div id="wrapper"> </div>
<div id="footer"> </div>
</body>
</html>
cheers
Antipitch
Hi,
Dein Vorschlag funktioniert aber auch nicht richtig.
willst du mit mir wetten?
Ich sag dir nur was ich sehe.
bei kürzeren seiten gibts das Problem, dass das site_body nicht bis runter geht (trotz min-height:100%)
dann hast du irgendwas falsch gemacht.
habs genauso wie du, nur hat das, was bei dir wrapper heißt, noch den site_header und den site_body. Und der site_body geht trotz min-height:100% nicht bis zum ende des wrappers
Was ich jetzt gemacht hab, ist, die Hintergrundeigenschaften des bodys dem wrapper zu geben. In meinem Fall geht das.
Damit fällt das nicht auf.
Nochmal Danke für deine Hilfe.
und bei längeren seiten, geht das site_body in den site_footer rein.
wenn du Textinhalte höher als 100% minus Höhe des footers hast: klar. Gib deinem site_body einfach'n padding nach unten. Du willst ja vermulich eh nicht bis direkt auf deinen footer schreiben...Was siehst du(?):
CSS:~~~css
html, body {
height:100%;
margin:0;
padding:0;
border:0 none;
}
#wrapper {
min-height:100%;
background-color:yellow;
}
#footer {
position:relative;
height:20px;
margin-top:-20px;
background-color:black;
}
>
> HTML:~~~html
> <!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" lang="de">
> <head>
> <title>Test</title>
> </head>
> <body>
> <div id="wrapper"> </div>
> <div id="footer"> </div>
> </body>
> </html>
>
cheers
Antipitch
Hi vlad,
habs genauso wie du, nur hat das, was bei dir wrapper heißt, noch den site_header und den site_body. Und der site_body geht trotz min-height:100% nicht bis zum ende des wrappers
Nee, das geht auch nicht, weil weder prozentuale Höhe in prozentualer Höhe funktioniert, noch min-height in min-height. Von irgendwelchen Farbabgrenzungen/ 100% Höhe des div#site_body (als Abgrenzung zum Hintergrund der Seite, nehme ich an) war ja auch anfänglich nicht die Rede. Aber du hast ja mitgedacht und
Was ich jetzt gemacht hab, ist, die Hintergrundeigenschaften des bodys dem wrapper zu geben. In meinem Fall geht das.
und die Sache selbst gelöst. Sehr erfreut!
cheers
Antipitch
PS: Bitte nur relevante Dinge zitieren, nicht einfach immer alles...