100％的页面高度的应用程序主屏幕CSS

Question

我想在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/

正如你可以看到它滚动在那里

Answer 1

百分数的问题是它们总是相对于父元素。如果你看一下Developer Tools，你会发现.outer的实际高度为0（零）。这是因为作为.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; 
} 

另一个解决方案可能是使用视口值。

.row { 
    height:33.3vh; 
} 

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

Answer 2

您可以将max-height添加到img元素。那是你要的吗？
jsFiddle

img { 
max-height: calc(100%/3); // or 33.33% 
} 

Answer 3

我觉得下面的CSS可以达到你需要的东西：

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
.outer{ 
    height: 100%; 
} 
.row { 
    height: 33.333333333%; 
    overflow: hidden; 
} 
.iconL { 
    float:left; 
    width: 50%; 
    height: 100%; 
    text-align: center; 
    background-color: yellow; 
} 
.iconL img { 
    height: 100%; 
    vertical-align: top; 
} 
.iconR { 
    float:left; 
    width: 50%; 
    height: 100%; 
    text-align: center; 
    background-color: beige; 
} 
.iconR img { 
    height: 100%; 
    vertical-align: top; 
} 

如前所述，你需要指定height: 100%您html和body元素设定一个参考值，可以是由后代元素继承。

关键是将图像缩放到行高的100％的高度，该高度设置为屏幕高度的33.33％。

向图像添加vertical-align: top可清除基线下面的一条白色空白。

由于您只有两个元素浮动在行中，因此您可以左右浮动，也可以左右浮动。

将overflow: hidden添加到.row将使该行的浮点数保持在其自己的块格式上下文中。

见演示在：http://jsfiddle.net/audetwebdesign/ZYL2C/

在Firefox中，结果如下：

可以左图右对齐，右图像左，添加一些权/左边距值来控制图像之间的间距。您的标记允许在此设计中有相当大的灵活性。