html - 页面高度应用主屏幕CSS的100％

我正在尝试使用CSS制作应用主屏幕。考虑一下您在其中选择应用程序的iPhone的布局。基本上是3x2的网格，占设备页面的100％。

我遇到的问题是，这被许多不同的设备使用，因此高度/宽度会根据设备而变化。

宽度工作正常，但在某些设备上高度有时会增加滚动。基本上，我希望页面在应用程序上全屏显示并且没有滚动。

这是我的HTML：

<div class="outer">
    <div class="row">
        <div class="iconL">
            <img src="http://coloredwebdesign.com/wp-content/uploads/2012/02/person-icon.png" />
        </div>
         <div class="iconR">
            <img src="http://coloredwebdesign.com/wp-content/uploads/2012/02/person-icon.png" />
        </div>
    </div>
    <div class="row">
         <div class="iconL">
            <img src="http://coloredwebdesign.com/wp-content/uploads/2012/02/person-icon.png" />
        </div>
         <div class="iconR">
            <img src="http://coloredwebdesign.com/wp-content/uploads/2012/02/person-icon.png" />
        </div>
    </div>
    <div class="row">
         <div class="iconL">
            <img src="http://coloredwebdesign.com/wp-content/uploads/2012/02/person-icon.png" />
        </div>
         <div class="iconR">
            <img src="http://coloredwebdesign.com/wp-content/uploads/2012/02/person-icon.png" />
        </div>
    </div>
</div>

这是我的CSS：

.outer{
    width: 100%;
    height: 100%;
}

.row {
    width: 100%;
}

.iconL {
    float: left;
    width: 50%;
}

.iconL img {
    float: left;
    width: 100%;
}

.iconR {
    float: left;
    width: 50%;
}

.iconR img {
    float: right;
    width: 100%;
}

我做了一个JSFilddle：http://jsfiddle.net/QrbKh/

如您所见，它在那里滚动

最佳答案

百分比的问题在于它们始终相对于父元素。如果看一下开发人员工具，您会发现.outer的实际高度为0（零）。这是因为作为.outer父级的主体没有设置为0的高度设置（零的100％仍为零）。
要解决该问题，只需添加

html,
body {
    height:100%;
    width:100%;
}

到您的CSS。这使得html和body占据了整个页面。

然后加

.row {
    height:33.3%;
}

.iconL,
.iconR,
.iconL img,
.iconR img {
    height:100%;
}

对我来说很好。但是由于您不能不休息就将100除以3，所以也要加上

body {
    overflow:hidden;
}

另一种解决方案是使用视口值。

.row {
    height:33.3vh;
}

其中“ vh”代表“视口高度”。因此33.3vh是指“视口高度的1/3”。实际上，视口值具有可接受的支持：http://caniuse.com/#search=viewport