# height:100% - auch wenn Screen vorbei



## maceo (1. Dezember 2004)

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


----------



## Gumbo (1. Dezember 2004)

Definiere mal den Hintergrund für das body-Element:
A List Apart: Faux Columns


----------



## maceo (1. Dezember 2004)

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


----------



## Gumbo (1. Dezember 2004)

Dann kommt es natürlich auf die Hintergrundgrafik an


----------



## maceo (1. Dezember 2004)

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


----------



## maceo (1. Dezember 2004)

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


----------



## Budman (1. Dezember 2004)

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


----------



## maceo (1. Dezember 2004)

Gern, hier das CSS:


```
.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:


```
<!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


----------



## Gumbo (1. Dezember 2004)

Wieso benutzt du nicht einfach eine Hintergrundgrafik, damit wäre es viel einfacher.


----------



## maceo (1. Dezember 2004)

...ja, damit wäre es einfacher und auch
sicher schon fertig - darf aber nicht sein.


----------



## Budman (1. Dezember 2004)

Hallo!

Das ist wieder mal ein typisches IE Problem, im Firefox funktioniert's wie gedacht....

Willst Du alle drei Bereiche bis ganz nach unten, oder nur jeweils bis der Content endet? Wenn letzteres, das klappt jetzt schon, wenn nicht, würde ich jetzt folgenden Ansatz probieren:

Ein div durchgehend (100%) mit Hintergrundfarbe #EEEEEE, darauf gelegt ein div mit #CCCCCC (left:160px; ). Und für den roten Bereich ebenfalls ein div, dieses genauso wie das erste draufgelegte (left:770px; ).

Ich schreib's später nochmal ausführlich auf, ich muss nur jetzt leider weg, und komme erst spät wieder. Morgen Vormittag kommt's dann in "fertig".

Gruss


----------



## Gumbo (1. Dezember 2004)

Und wer verbietet dir das? Eine Hintergrundgrafik schränkt die Flexibilität einer Webseite nicht zwangsläufig ein.


----------



## maceo (1. Dezember 2004)

@Budman: Ist leider nicht ganz richtig, dass es ein IE Problem ist. Teste bereits die ganze Zeit parallel mit IE, Firefox und Opera und da tritt es auch auf...

@Gumbo: Was soll ich sagen, ist halt eine von vielen Anforderungen. Eine Einschränkung ist es dann, wenn z.B. die Farbe schnell geändert werden sollen, dann musst du in dem Fall der Hintergrundgraphik eine Graphik "anfassen" und keinen Code.

Jetzt kommt noch der erhöhte Schwierigkeitsgrad hinzu, was vielleicht nicht aus dem Code ersichtbar ist:

Ich habe quasi zwei Blöcke, von denen der eine dynamischen Content enthält, der andere nicht (somit fällt leider dein Vorschlag raus, Budman, das Ganze in ein div zu packen - wobei ich so in meinen ersten ansätzen ganz gut zurecht gekommen bin (bis ich auf andere Probleme gestoßen bin)). Ich habe mal versucht es graphisch darzustellen, damit wir alle von der gleichen Sache sprechen:


```
+-----------------------------+---+------------+
| header                      |   |            |
|                             |   | banner     |
+--------+--------------------+ s |            |
| navi   |                    | p |            |
|        |  dynamischer       | a | 2nd navi   |
|        |                    | c |            |
|        |      Content       | e |            |
|        |                    | r |            |
|        |                    |   |            |
|        |                    |   |            |
+--------+--------------------+---+------------+
```

Es gibt halt gewisse graphische Vorgaben, die eingehalten werden müssen.
Könnt ihr mich verstehen?

maceo


----------



## maceo (2. Dezember 2004)

Hi zusammen,

habe jetzt als "Notlösung" erstmal ein Hintergrundbild genommen. Ist zwar
nicht so wie es sein soll, aber anders komme ich im Moment nicht voran.
@Gumbo: Das heißt jetzt aber nicht, dass dies die Lösung ist ;o)

Vielen Dank erstmal - schreibt gerne, wenn ihr die Lösung zu dem Problem
gefunden habt - ich bin gespannt!

maceo


----------



## Budman (2. Dezember 2004)

Hallo nochmal!

Also ich hab heute mehrfach versucht, da eine Lösung zu finden, aber es scheint nicht zu gehen. 

Ich bin mir aber 100% sicher, dass ich sowas in der Art schonmal gesehen habe, und meiner Erinnerung nach auch schonmal gemacht habe.

Ich bastel mal weiter, es ist auf jeden Fall nicht vergessen, denn das beschäftigt mich jetzt schon 

Ich lass wieder was hören.

Gruss Bud


----------



## Crazy X (3. Dezember 2004)

Das fast gleiche Problem habe ich auch gerade...
oben soll der header eine feste größe haben und unten soll der content auf volle seitenhöhe gestreckt werden.
Bis jetzt habe ich nur eine dynamische Javascript-Lösung... aber ich möchte das gerne unkompliziert mit css lösen.

Hoffe uns kann jemand helfen! Danke


----------



## Margarine-Mann© (3. November 2005)

öhm ... hi ^^

ich hab zwar leider (noch) keine Lösung, aber leider Gottes das selbe Probleme (glaube ich ^^).

Bei mir ist das Problem, dass sich mein Eltern-DIV seltsamerweise nicht gemeinsam mit dem in ihm enthaltenem Content-DIV verlängert.

Ihr könnt euch das Problem ja mal ansehen:
http://www.margarine-mann.de/v3/index.html

Sobald ich mein Browserfenster etwas verkleinere (um verschiedene Auflösungen zu testen), muss ich feststellen, dass der Content sich zwar fortsetzt, aber der übergeordnete DIV nur noch 100% des aktuellen Browserauschnittes zeigt (ich mein: irgendwie war es ja so gemeint mit dem height: 100% ... aber eher auf Dauer ^^)

Ich mach noch nich sooo lange was mit CSS und geh hier langsam im Tetraeder -.-'
Ich hab schon zig Möglichkeiten ausprobiert, wie z.b.: die position der Child-DIVs zu entfernen; die Container umzustrukturieren (um den Content außerhalb des Eltern-DIVs stehen zu haben); dem Eltern-DIV im HTML-Code zusätzlich die Höhe 100% zu geben; meinen Monitor links und rechts zu schlagen ... ohne Erfolg.

Ein Freund von mir meint, dass die Darstellung im Safari-Browser auf'm Mac ohne Makel ist ... ABER IN JEDEM VERDAMMTEN ANDEREN BROWSER SCHON! (ich will nach Hause *heul*)

Kann es was mit der Vererbung zu tun haben?
Sind prozentuale und absolute Angaben für ein einziges DIV evtl. zu viel?
Kann ich mein Problem evtl. anders lösen?
Wie ist der Geschmack der Farbe Blau?
Wer ist Paul?

Hilfe -.-'

Mfg
Margarine-Mann©


----------



## Hagi (10. November 2005)

Hai Leute

Folgende Erklärung zu eurem Problem:


Zieht man einen DIV auf die gesamte Viewporthöhe (sichtbares Inhalts-Fenster des Browsers)  auf, so muss man erstmal ein paar "Vorbereitungen" treffen.

Ich beobachte das Verhalten von height: 100% schon einige Zeit und folgender Artikel  wird euch schonmal grundsätzlich weiterhelfen, was eine 100% Höhe anbelangt.
Hier werden Browserverhalten bei height 100% etwas genauer erklärt. Für eine 100% Höhe ist es auf jeden Fall notwendig HTML und Body auch height = 100% zuzuweisen.

Am meisten Probleme macht es, das Ganze in IE & FF zum laufen zu bringen. Ich kenne bisher keine Lösung ohne Workaround.


```
#Container {
HEIGHT: 100%;  
} 


<< funktioniert nur im IE. im Firefox werden 100% des viewports berechnet und beim scrollen läuft der Hintergrund nicht mit.

#Container {
MIN-HEIGHT: 100%;  
} 

<< funktioniert nur im Firefox. Der IE kennt diese Eigenschaft min-height nicht und ignoriert sie.


Superbe, denken wir uns, wir machen einfach beide Eigenschaften dann funzts in beiden Browsern.

man macht: 

#Container {
HEIGHT: 100%;  
MIN-HEIGHT: 100%;
} 

und es geht nur noch im IE. Firefox erkennt nun wieder die height:100% und läst den BG beim scrollen nicht mitwachsen. ZWAR beim vergrössern des fensters, aber beim scrollen nicht.
```

Aus diesem Grund müssen wir das Height 100% vor dem Firefox verstecken. Dies kann man auf verschiedene Arten tun etwa mit Conditional Comments oder dann eben mit einer Selektoren-Auswahl-Regel die der FF nicht versteht. (sry habe grad kein beispiel im kopf)

Ziel ist, dass der FF die Angabe min-height erhält, und der ie die Angabe height. Dann 's in beiden Browsern.

cheers


----------

