SASS如何在旋转身体时使页面的高度和宽度完整？

Question

我必须旋转身体并使其全高和全宽。

好吧，我使用 vh 指标并且非常适合宽度，但身高仍不合适...

我必须旋转90度，但高度和宽度仍然指向与不旋转相同的方向

Ps：我添加了.red，以便更容易看到div/body适合的位置。

  

我想要的只是旋转内容适合窗口可用的整个页面/大小

修改

我发现有一种方法是通过计算sin和cos来实现这一目标， 我想知道 SASS 能做到吗？以更自动化/懒惰的方式？

请参阅代码段：

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>

非常感谢！

Answer 1

我认为你的CSS应该使用vw作为高度而vh使用宽度，因为在旋转状态下CSS值仍然指向原始定位。所以：

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

应用后，红色框的尺寸应与视口的尺寸相匹配。

但是还有第二个问题要处理。当某些东西旋转时，它默认围绕其中心旋转。因此，对于矩形元素（宽度和高度不同），围绕中心旋转会将元素移动到页面上的不同位置。

您需要使用tranform-origin CSS属性来抵消此效果。 transform-origin更改了转换的原点，在这种情况下是元素旋转的点。

旋转固定尺寸的元素时，您可以非常轻松地使用此属性来偏移移动。不幸的是，我还没有弄清楚如何设置tranform-origin以便它可以使用可变大小的元素，就像在这种情况下一样。这可能是您必须使用JavaScript（或者可能比我更有创意的人可以找到仅CSS或SASS选项）。

有关transform-origin的更多信息，请参阅：https://css-tricks.com/almanac/properties/t/transform-origin/

并且：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

修改

试试这个并告诉我它是否符合您的要求。首先，我们如上所述设置宽度和高度（宽度：100vh;高度：100vw;）。然后，我们不是试图计算可以补偿上面推测的任何给定宽度的变换原点，而是让盒子围绕它的左上轴旋转，然后使用盒子上的绝对定位将位置从100％向下移动视口的顶部（即，将盒子向下推1倍，使其回到原位）。

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>

Answer 2

还有一个单位大众。 100vw等于视口宽度的100％，因此您可以使用：

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