3

I'm have to rotate my body and make it full height and full width.

Well, I used the vh metric and worked perfect for width, but height still not fitting well...

I had to rotate 90 degrees but the height and width still referring the same orientation as not rotate.

Ps: I added .red to be easier to see where the div/body is fitting.

All I want is the rotated content fit the whole page/size of available the window

EDIT

I just found out that there is an way of doing it by computing sin and cos, I wonder if the SASS can do it ? In an more automate/lazy way ?

Please refer the snippet:

div.ccw {
         transform: rotate(-90deg) translateY(0px); 
         -webkit-transform: rotate(-90deg) translateY(0px); 
        -moz-transform: rotate(-90deg) translateY(0px);
        -o-transform: rotate(-90deg) translateY(0px);
        -ms-transform: rotate(-90deg) translateY(0px);
    }
.main-screen{
width:100vh; 
  height:100vh;
}
.red{
background-color:red;
}
#footer{
  
}
#footer {
     position: fixed;
     bottom: 0;
     width: 100%;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-view=""  class="red container-fluid main-screen ng-scope ccw"><div class="error row ng-scope">
 <div class="col-xs-12 text-center">
  <div class="padding-3percent logo col-xs-12 text-center">
   <img class="img-responsive center-block" width="60px" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
  </div>
  <div class="padding-2percent logo col-xs-12 text-center">
   <img width="60px" class="img-responsive center-block" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
  </div>
  <div class="text-center col-xs-12">
   <h1>TEST</h1>
  </div>
  <div class="text-center col-xs-12">
   <strong>Test test Test test Test test Test test Test test</strong> 
  </div>
  <div id="footer">
   <div class="text-center col-xs-12">
    <p>
     Test test Test testTest test Test test Test test Test test Test test Test test Test test Test test Test testTest testTest test
    </p>
   </div>
   <div class="text-right col-xs-12">
    <span>counter</span>
   </div>
  </div>
 </div>
</div></div>

Many Thanks!

Alvaro Silvino
  • 9,441
  • 12
  • 52
  • 80

2 Answers2

5

I think your CSS should use vw for height and vh for width since in the rotated state the CSS values still refer to the original positioning. So:

.main-screen{
    width:100vh; 
    height:100vw;
}

Once you apply that, the dimensions of your red box should match the dimensions of the viewport.

There's a second problem to deal with, though. When something rotates, by default it rotates around its center. As a result, with rectangular elements (width and height are different), rotating around the center moves the element to a different position on the page.

You would need to use the tranform-origin CSS property to offset this effect. transform-origin changes the point of origin for a transformation, in this case the point around which the element is rotating.

When rotating an element of a fixed size, you could offset the movement using this property pretty easily. Unfortunately, I haven't yet figured out how to set tranform-origin so that it works with an element of variable size, as in this case. This may be something you would have to use JavaScript for (or maybe someone more creative than me could find a CSS- or SASS-only option).

For more on transform-origin, see: https://css-tricks.com/almanac/properties/t/transform-origin/

And: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Edit

Try this and let me know if it does what you want. First, we're setting the width and height as described above (width:100vh; height:100vw;). Then, instead of trying to calculate a transform-origin that can compensate for any given width as speculated above, we're making the box rotate around it's top left axis, then using absolute positioning on the box to shift the position 100% down from the top of the viewport (i.e., pushing the box down 1x its length so that it's back in position).

div.ccw {
    transform: rotate(-90deg) translateY(0px); 
    -webkit-transform: rotate(-90deg) translateY(0px); 
    -moz-transform: rotate(-90deg) translateY(0px);
    -o-transform: rotate(-90deg) translateY(0px);
    -ms-transform: rotate(-90deg) translateY(0px);
    transform-origin: top left;
}
.main-screen{
    width:100vh; 
    height:100vw;
    position:absolute;
    top:100%;
}
.red{
    background-color:red;
}
#footer{
  
}
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-view=""  class="red container-fluid main-screen ng-scope ccw"><div class="error row ng-scope">
 <div class="col-xs-12 text-center">
  <div class="padding-3percent logo col-xs-12 text-center">
   <img class="img-responsive center-block" width="60px" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
  </div>
  <div class="padding-2percent logo col-xs-12 text-center">
   <img width="60px" class="img-responsive center-block" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
  </div>
  <div class="text-center col-xs-12">
   <h1>TEST</h1>
  </div>
  <div class="text-center col-xs-12">
   <strong>Test test Test test Test test Test test Test test</strong> 
  </div>
  <div id="footer">
   <div class="text-center col-xs-12">
    <p>
     Test test Test testTest test Test test Test test Test test Test test Test test Test test Test test Test testTest testTest test
    </p>
   </div>
   <div class="text-right col-xs-12">
    <span>counter</span>
   </div>
  </div>
 </div>
</div></div>
mmirus
  • 191
  • 1
  • 6
2

There is also a unit vw. 100vw is equal to 100% of viewport width so you could use:

.main-screen{
    width:100vw;
    height:100vh;
}
Richard Guy
  • 470
  • 4
  • 12