html - 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

如果屏幕是指视口(viewport)，那么您可以使用视口(viewport)单位

.twoThirds {
   height: 66.6vh;
}

其中 1vh 是视口(viewport)高度的 1/100，100vh 是整个视口(viewport)高度。
跨浏览器支持:http://caniuse.com/#feat=viewport-units

对于不(完全)支持这些单位的旧设备，一个可能的解决方法是将 height: 100% 分配给 html 和 body 元素和 height: 66.6% 到 .twoThird 元素