SASS How make the page full height and width when rotated body?
<p>I'm have to rotate my body and make it <strong>full height</strong> and <strong>full width</strong>.</p>

<p>Well, I used the <strong>vh</strong> metric and worked perfect for <strong>width</strong>, but height still not fitting well...</p>

<p>I had to <strong>rotate 90 degrees</strong> but the <strong>height</strong> and <strong>width</strong> still referring the same orientation as <strong>not</strong> rotate.</p>

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

<blockquote>
  <p>All I want is the rotated content fit the whole page/size of available the window</p>
</blockquote>

<h2>EDIT</h2>

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

<p>Please refer the snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;div ng-view=""  class="red container-fluid main-screen ng-scope ccw"&gt;&lt;div class="error row ng-scope"&gt;
 &lt;div class="col-xs-12 text-center"&gt;
  &lt;div class="padding-3percent logo col-xs-12 text-center"&gt;
   &lt;img class="img-responsive center-block" width="60px" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png"&gt;
  &lt;/div&gt;
  &lt;div class="padding-2percent logo col-xs-12 text-center"&gt;
   &lt;img width="60px" class="img-responsive center-block" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png"&gt;
  &lt;/div&gt;
  &lt;div class="text-center col-xs-12"&gt;
   &lt;h1&gt;TEST&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="text-center col-xs-12"&gt;
   &lt;strong&gt;Test test Test test Test test Test test Test test&lt;/strong&gt; 
  &lt;/div&gt;
  &lt;div id="footer"&gt;
   &lt;div class="text-center col-xs-12"&gt;
    &lt;p&gt;
     Test test Test testTest test Test test Test test Test test Test test Test test Test test Test test Test testTest testTest test
    &lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="text-right col-xs-12"&gt;
    &lt;span&gt;counter&lt;/span&gt;
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Many Thanks!</p>