Olivia A.: transform scale

Hallo!

ich versuche eine ganze Webseite nachträglich zu vergrößern, aber egal wie diese Seite gebaut ist, am Ende taucht immer der horizontale Scrollbalken auf, obwohl eigentlich noch genug Platz bis zum Rand sein sollte.

  
body {  
    transform: scale(1.2);  
    -moz-transform: scale(1.2);  
    -ms-transform: scale(1.2);  
    -webkit-transform: scale(1.2);  
    -o-transform: scale(1.2);  
    transform-origin: 50% 0;  
}  

Ihr könnt das z.B. bei www.golem.de mit der Startseite testen. Einfach lokal abspeichern und in den Head ein <base href="http://www.golem.de/" /> einfügen, damit die ganzen relativen Pfade funktionieren. Dann in den Head den oben geposteten Block einfügen und im Chrome und Firefox taucht der horizontale Scrollbalken auf. Lasse ich das transform-origin weg, wird ein Teil des Headers oben abgeschnitten. Mit Verändern des ersten Wertes kriege ich den Scrollbalken weg, aber dann hängt die Seite z.B. komplett rechts am Rand, obwohl sie mittig stehen soll.

Was mache ich falsch?

Danke!

  1. Hi,

    ich versuche eine ganze Webseite nachträglich zu vergrößern, aber egal wie diese Seite gebaut ist, am Ende taucht immer der horizontale Scrollbalken auf, obwohl eigentlich noch genug Platz bis zum Rand sein sollte.

    body {

    transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform-origin: 50% 0;
    }

      
    in den allermeisten in freier Wildbahn anzutreffenden Fällen hat das body-Element eine Breite von 100%, so dass es die gesamte Breite des Browserfensters ausfüllt - auch wenn dessen Inhalt dann nur einen Teil dieser Breite nutzt. Versuch mal, dem body-Element auch noch eine auffällige Hintergrundfarbe zu geben, dann wird das deutlich.  
      
    Du verbreiterst nun den body effektiv auf 120% der Fensterbreite. Und da wunderst du dich, dass Scrollbalken eingeblendet werden? Es wäre schlecht, wenn dem nicht so wäre.  
      
    
    > Was mache ich falsch?  
      
    Vielleicht möchtest du den Effekt nur auf die Kindelemente von body anwenden, anstatt auf body selbst?  
      
    Ciao,  
     Martin  
    
    -- 
    Gibst du dem Opi Opium, haut Opium den Opi um.  
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    
    1. in den allermeisten in freier Wildbahn anzutreffenden Fällen hat das body-Element eine Breite von 100%, so dass es die gesamte Breite des Browserfensters ausfüllt - auch wenn dessen Inhalt dann nur einen Teil dieser Breite nutzt. Versuch mal, dem body-Element auch noch eine auffällige Hintergrundfarbe zu geben, dann wird das deutlich.

      Du verbreiterst nun den body effektiv auf 120% der Fensterbreite. Und da wunderst du dich, dass Scrollbalken eingeblendet werden? Es wäre schlecht, wenn dem nicht so wäre.

      Nein, mit dem Wissen wundere ich mich nicht mehr. Vielen Dank! ;)