height:100% - auch wenn Screen vorbei

Status
Nicht offen für weitere Antworten.
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
 
Und wer verbietet dir das? Eine Hintergrundgrafik schränkt die Flexibilität einer Webseite nicht zwangsläufig ein.
 
@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:

Code: 
+-----------------------------+---+------------+
| 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
 
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
 
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
 
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
 
ö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©
 
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.

Code: 
#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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück