Html 100%页面高度应用程序主屏幕CSS

我正在尝试用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>

我做了一个JSFilddle：

---

如您所见，它在那里滚动

百分比的问题在于它们总是相对于父元素。如果你看一看开发工具内部，你会发现.outer的实际高度是0（零）。这是因为body as.outer的父级没有解释为零的高度集（零的100%仍然为零）。 要解决这个问题，只需添加

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

到你的CSS。这使得html和正文填充整个页面

然后加上

.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”。实际上，视口值具有可接受的支持：

您可以向

img

元素添加

max height

。这就是你想要的吗

---

我认为以下CSS可以满足您的需要：

html，正文{
身高：100%；
填充：0；
保证金：0；
}
.外部{
身高：100%；
}
.行{
身高：33.333%；
溢出：隐藏；
}
.iconL{
浮动：左；
宽度：50%；
身高：100%；
文本对齐：居中；
背景颜色：黄色；
}
.iconL img{
身高：100%；
垂直对齐：顶部；
}
.iconR{
浮动：左；
宽度：50%；
身高：100%；
文本对齐：居中；
背景颜色：米色；
}
.iconR img{
身高：100%；
垂直对齐：顶部；
}

如前所述，您需要为

html

和

body

元素指定

height:100%

，以设置可由子元素继承的参考值

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

向图像中添加

vertical align:top

，可以清除基线下的一小部分空白

由于行中只有两个浮动元素，因此可以同时向左或向左和向右浮动

将

overflow:hidden

添加到

。行

将使行的浮动保持在它们自己的块格式上下文中

请参见演示：

在Firefox中，结果如下所示：

---

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

因此，您希望三行在屏幕上不垂直滚动，因此每行约为总/屏幕高度的33.33%？图像宽度也会相应地缩放？是的，基本上，图标会相当大（考虑到每个设备），然后页面会相应地隐藏图标。它似乎可以工作一秒钟，然后再次切换到全屏。我想可能是jquery移动公司接管了？我拍了一段关于这个问题的录像嘿！很酷的视频，很好！我的第一个猜测是jQuery mobile有一个带有CSS规则的样式表，它凌驾于您刚刚创建的样式表之上。如果是这种情况，您需要使您的规则更加具体，可能需要添加

id

等等。另外，查看任何可能会改变CSS设置的媒体查询。我认为我们解决了CSS布局问题，现在我们需要解决实现/平台问题。

.row {
    height:33.3vh;
}

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