CSS - 使用CSS的移动屏幕的百分比高度

Question

我猜这个问题的答案是否定的 - 但是有一种聪明的方法来计算移动屏幕的2/3高度吗？

我需要一个包含背景图像的标题div来占据屏幕高度的2/3,无论设备如何 - 如果可能的话,一个干净的CSS唯一的解决方案将是理想的.

目前我有

    <div class="twoThirds">
        <img src="headerimg.jpg" />  
    </div>

和以下LESS风格 -

.twoThirds{


height:66%;
@media (max-width: 766px) {
    height:200px;
}
margin:0; 
padding:0;
width:auto;

img{

    width:100%;
    height:auto;

}

}

Answer 1

如果你通过屏幕表示相反的视口,那么你可以使用视口单元

.twoThirds {
   height: 66.6vh;
}

哪里1vh是1/100视口的高度,并100vh为全视口的高度.
跨浏览器支持:http://caniuse.com/#feat=viewport-units

对于较旧的设备,其中,这些单元不(充分)支持,可能的解决方法是将分配height: 100%到html与body元件和height: 66.6%所述.twoThird元件