height:100% - auch wenn Screen vorbei

Status
Nicht offen für weitere Antworten.
M

maceo

Mitglied
Hi zusammen,

mein Problem ist folgendes (habe hier noch keine Antwort gefunden):
Ich habe eine Seite mit dynamischen Inhalt und hätte gern einen sich
mit vergößernden Hintergrund (als div). Ungefähr so vorzustellen:

<div class="hintergrund">
<div class="inhalt">dynamisch</div>
</div>

oder halt:

<div class="hintergrund"></div>
<div class="inhalt">dynamisch</div>

(stark vereinfacht)

Nun ist es leider so, dass sobald der Screen vorbei ist, der Hintergrund
auch weg ist. Ich habe bereits versucht min-height:100% und anderes...
Wichtig ist, dass das Ganze dynamisch bleibt, ich also auch kein Hin-
tergrundbild nehmen kann.

Hat jemand eine Idee? Bin ich zu verstehen?
Ich dachte eigentlich, dass dies ein Problem sei was schon öfter vorkam.

maceo
 
Hi Gumbo,

vielleicht hab ich es ja falsch verstanden, aber ich soll ein
Hintergrundbild definieren? Das geht ja leider nicht, da die
Seite sehr flexibel bleiben muss.

Magst du noch mal posten?

maceo
 
Ja, das ist es eben. Es darf keine Graphik verwendet werden!
So flexibel wie möglich.

.main {
margin-top:100px;
padding:0px;
width:500px;
height:100%;
min-height:100%;
background-color:#FF0000;
position:absolute;
}

...und darauf dynamischer Content. Das Problem ist wie gesagt,
dass bei "runterscrollen" auf einmal Ende ist mit der 500px breiten
roten Farbe, die ja aber eigentlich immer present sein soll...

Noch 'ne Idee?

maceo
 
Ist mein Problem für alle verständlich? Ich bin davon ausgegangen, dass
schon mehrere CSS-User damit zu kämpfen gehabt hätten... :(

maceo
 
Hallo!

Das kann eigentlich nicht sein, also will sagen, da muss irgendwo ein Fehler stecken, allgemeines Problem ist das nicht.

Wenn das div länger wird, muss auch die Hintergrundfarbe "mitwachsen".

Hast Du es denn schon mit content gefüllt? Und versuch mal "height:auto;" anstatt 100%.

Poste doch mal das ganze Stylesheet, vielleicht findet sich da was...

Gruss Bud
 
Gern, hier das CSS:

Code: 
.body {
    margin:0px;
    padding:0px;
    background-color:#000000;
}
.mainheader {
    margin:0px;
    padding:0px;
    width:794px;
    height:145px;
    background-color:#FF0000;
    position:absolute;
}
.mainbody {
    margin-top:145px;
    padding:0px;
    width:794px;
    height:100%;
    background-color:#FF0000;
    position:absolute;
}
.bannerheader {
    margin:0px;
    margin-left:799px;
    padding:0px;
    width:175px;
    height:145px;
    background-color:#FF0000;
    position:absolute;
}
.bannerbody {
    margin-top:145px;
    margin-left:799px;
    padding:0px;
    width:175px;
    height:100%;
    background-color:#FF0000;
    position:absolute;
}
.top {
    margin-top:0px;
    margin-left:0px;
    padding:0px;
    width:770px;
    height:145px;
    background-color:#000000;
    position:absolute;
}
.navi {
    margin-top:145px;
    margin-left:0px;
    padding:0px;
    width:160px;
    height:100%;
    max-height:100%;
    background-color:#EEEEEE;
    position:absolute;
}
.content {
    margin-top:145px;
    margin-left:160px;
    padding:0px;
    width:610px;
    height:100%;
    max-height:100%;
    background-color:#CCCCCC;
    position:absolute;
}


...und hier das grobe Script:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="body">
<div class="mainheader"></div>
<div class="mainbody"></div>
<div class="bannerheader"></div>
<div class="bannerbody"></div>
<div class="top"></div>
<div class="navi"></div>
<div class="content"></div>
<div class="banner"></div>
</body>
</html>

Das Ganze entspricht nicht 100%ig dem Original, da es sonst
zu verwirrend wäre mit den PHP-includes.

div-Tag mit Farbe als Hintergrund - durchgezogen bis zum Ende.
@Budman: "auto" hat leider nix gebracht...

maceo
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück