3 Divs a 100% height
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansatz
aufbau
beschriebene szenario
code
display
fehler
kleinigkeit
projekt
quellcode
richtung
safari
schaffen
sinn
transfer
url
vergessen
version
wochenende
wort
zeigen
-
Hi, wenn ich das im Titel beschriebene Szenario darstelle (ich habe 3 Divs übereinander, absolut positioniert, mit winer Breite von 100% und einer Höhe von ebenfalls 100%) Dann habe ich
1) Im Firefox meine erwünschte Ausgabe:
Jedes Div erfüllt die ganze Seite
2) Unter Safari einen fehler:
Nur 1. und 2. Div erfüllen die ganze Seite, das 3. Div ist ca 2x so groß wie eine Seite.
Wie kommt es zu dieser Fehldarstellung? Und kennt jemand einen Workaround / eine crossbrowserkompatible Lösung / Ansatz / Idee?
Liebe Grüre & vielen Dank! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Vielleicht wäre eine Beispielseite mit deinem Quellcode ganz angebracht.
Abgesehen davon, daß ich jetzt nur vermuten kann, wie dein Quellcode aussieht, funktioniert das hier bei mir im Safari.
Alle Div's gleich groß.
<!doctype html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .one, .two, .three { position: absolute; width: 100%; height: 100%; } .one { background-color: blue; z-index: 0; } .two { background-color: gray; z-index: 1; } .three { background-color: yellow; z-index: 2; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> </html> -
pcw schrieb:
Abgesehen davon, daß ich jetzt nur vermuten kann, wie dein Quellcode aussieht, funktioniert das hier bei mir im Safari.
Alle Div's gleich groß.
Also Vom Aufbau ist der Code eigentlich genauso wie dus beschrieben hast 8sry ich dachte das lässt sich in Worten einfacher erklären..).
Allerdings sehe ich (ich wunder mich gerade selbst) nur die gelbe Seite ?!
MFG -
ich habe bei mir ab und zu auch darstellungsunterschiede zwischen IE, IE in älteren Versionen, Chrome und Firefox gehabt.
Hast du mal den Code von pcw kopiert und bei dir getestet ob es bei dir dann richtig dargestellt wird?
Oft hast du einfach nur eine Kleinigkeit vergessen oder falsch geschrieben, welches Fehler verursacht.
Am besten wäre, wenn du uns einfach mal deinen Quellcode zeigen würdest..
gelbe Seite? Habe ich jetzt irgendwie nicht verstanden..
LG -
lunaticfay schrieb:
ich habe bei mir ab und zu auch darstellungsunterschiede zwischen IE, IE in älteren Versionen, Chrome und Firefox gehabt.
Hast du mal den Code von pcw kopiert und bei dir getestet ob es bei dir dann richtig dargestellt wird?
Oft hast du einfach nur eine Kleinigkeit vergessen oder falsch geschrieben, welches Fehler verursacht.
Am besten wäre, wenn du uns einfach mal deinen Quellcode zeigen würdest..
gelbe Seite? Habe ich jetzt irgendwie nicht verstanden..
LG
Ich habe einfach pcws code genommen um zu schauen wies da aussieht, weil das eigentlich auc genau das ist was ich vom Aufbau her habe (ich habe eben viel Dynamisches und das würd das ganze verkomplizieren, also wäre es am besten wenn wir ocws beispiel nehmen weil das eig genau das ist was ich faktisch auch habe. Den Transfer auf mein projekt muss ich dann selbst schaffen.)
Wenn ich also pcws Code nehme und so anzeige sehe ich nur eine gelbe Seite 8sein 3. Div)
LG -
Mit
funktioniert es:float:left
<!DOCTYPE HTML> <html> <head> <title> drei Divs </title> <style type="text/css"> html, body { height:100%; margin:0; padding:0;} #links { background-color:yellow; float:left; height:100%; width: 33.33%; } #mitte { background-color:blue; float:left; height:100%; width: 33.33%; } #rechts { background-color:red; float:left; height:100%; width: 33.33%; } </style> </head> <body> <div id=links></div> <div id=mitte></div> <div id=rechts></div> </body> </html> -
kaetzle7 schrieb:
Mit
funktioniert es:float:left
aber der TE schrieb doch in seinem 1. Beitrag von 3 DIVs übereinander
programtools schrieb:
Allerdings sehe ich (ich wunder mich gerade selbst) nur die gelbe Seite ?!
Natürlich siehst du nur eine gelbe Seite, weil das 3. div ganz oben liegt. Wenn du
ein#three
gibst, siehst du nur eine graue Fläche (#two).Display:none
Vielleicht habe ich dich aber auch nur falsch verstanden, bzw. reden wir hier aneinander vorbei....
-
kaetzle7 schrieb:
pcw schrieb:
Stimmt habe ich doch glatt überlesen, wahrscheinlich, weil mir der Sinn des ganzen nicht ganz klar ist... Ein Link zur Seite und eine Erklärung für was er das braucht, wäre in diesem Fall wirklich sinnvoll.
aber der TE schrieb doch in seinem 1. Beitrag von 3 DIVs übereinander
Ou Sorry :/
ich meinte übereinander nicht in Z sondern in Y Richtung. Untereinander wäre also das bessere Wort gewesen. Tut mir leid .
Grüße -
Also untereinander
<!doctype html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #one, #two, #three { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } #one { background-color: blue; } #two { background-color: gray; top: 100%; } #three { background-color: yellow; top: 200%; } </style> </head> <body> <div id="one"></div> <div id="two"></div> <div id="three"></div> </div> </body> </html>
Funktioniert bei mir im Safari -
Joup super, vielen Dank !! , das mit den tops hats gelöst :)
Schönes Wochenende noch wünsche ich :)
Grüße -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
