html - 页面高度的 100% 应用程序主屏幕 CSS

Question

我正在尝试使用 CSS 制作应用程序主屏幕。想想你选择应用程序的 iPhone 布局。基本上是 100% 的设备页面的 3x2 网格。

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

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

这是我的 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/

如你所见，它在那里滚动

Answer 1

百分比的问题在于它们总是相对于父元素。如果您查看开发人员工具内部，您会发现 .outer 的实际高度为 0(零)。那是因为 body 作为 .outer 的父级没有设置高度，它被解释为零(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;
}

另一种解决方案可能是使用视口(viewport)值。

.row {
    height:33.3vh;
}

其中“vh”代表“视口(viewport)高度”。所以 33.3vh 指的是“视口(viewport)高度的 1/3”。实际上视口(viewport)值有一个可接受的支持:http://caniuse.com/#search=viewport