nicht angemeldet
CSS: 100% Höhe des Gesamtbereichs
Hallo,
versuche mich gerade an einem einfachen Design.
Es gibt einen Header, eine Inhaltsteil und einen Footer, der bei entsprechend langem Text auch erst mit Scrollen erreichbar sein kann.
Ist der Text aber eher kurz, sollte sich der Footer trotzdem am unten Bildschirmrand befinden.
Das Problem ist, wenn ich nun dem Inhaltsteil die Mindesthöhe 100% gebe, wird die Seite natürlich länger als das Browserfenster, es erscheint also ein Scrollbalken.
Erstelle ich einen Container mit der Mindesthöhe 100%, füllt der Inhaltsteil diese Mindesthöhe nicht aus.
Das sieht dann so aus, die blauen Balken kommen durch die Web Developer Toolbar und zeigen die Blockelemte:
http://www.abload.de/img/2010-05-09--04.04.58mmdx.jpg
Code des Ganzen:
HTML-Datei
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="container">
<div id="top">Header</div>
<div id="content">
Text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Text2
</div>
<div id="bottom">Footer</div>
</div>
</body>
</html>
CSS-Datei dazu:
*
{
margin: 0;
padding: 0;
}
html, body
{
background-color: #000000;
color: #FF0000;
text-align: center;
height: 100%;
}
div
{
text-align: left;
}
#container
{
width: 300px;
margin: 0 auto;
min-height:100%;
}
#top
{
width: 300px;
background-color: #FFF00F;
height: 50px;
}
#content
{
width: 300px;
background-color: #FFFFFF;
}
#bottom
{
width: 300px;
background-color: #555555;
height: 50px;
}
Wie kann ich erreichen, dass der Inhaltsteil so weit gestreckt wird, dass die Seite genau 100% der Browserfensters ausfüllt?
-
hei,
da ist beispiel:
< http://gut.lv/beispiel/stickself.html>
LG
-
hei,
da ist beispiel:
http://gut.lv/beispiel/stickself.html
LG
Danke für den Link, mit etwas Rumprobieren hab ich damit eine Lösung gefunden :)
-
-
Kannst du dem Inhaltsteil nicht einfach min-height: 80% geben. Dann dürfte der Footer auch ungefähr unten sein.
Oder gib dem Footer position: absolute; bottom: 0px;
vl geht das...