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中，結果如下：

可以左圖右對齊，右圖像左，添加一些權/左邊距值來控制圖像之間的間距。您的標記允許在此設計中有相當大的靈活性。