kostenloser Webspace werbefrei: lima-city


3 Divs a 100% height

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    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!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Vielleicht wäre eine Beispielseite mit deinem Quellcode ganz angebracht. :wink:

    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>
  4. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    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
  5. 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
  6. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    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
  7. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    Mit
    float:left
    funktioniert es:

    <!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>
  8. kaetzle7 schrieb:
    Mit
    float:left
    funktioniert es:


    aber der TE schrieb doch in seinem 1. Beitrag von 3 DIVs übereinander :confused:

    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
    #three
    ein
    Display:none
    gibst, siehst du nur eine graue Fläche (#two).

    Vielleicht habe ich dich aber auch nur falsch verstanden, bzw. reden wir hier aneinander vorbei.... :biggrin:
  9. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    pcw schrieb:
    aber der TE schrieb doch in seinem 1. Beitrag von 3 DIVs übereinander :confused:
    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.
  10. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    kaetzle7 schrieb:
    pcw schrieb:
    aber der TE schrieb doch in seinem 1. Beitrag von 3 DIVs übereinander :confused:
    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.


    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
  11. Also untereinander :biggrin:

    <!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
  12. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    Joup super, vielen Dank !! , das mit den tops hats gelöst :)

    Schönes Wochenende noch wünsche ich :)

    Grüße
  13. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!