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

百分比的问题在于它们总是相对于父元素。如果您查看开发人员工具，您将意识到.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;
}

其中＆＃34; vh＆＃34;代表＆＃34;视口高度＆＃34;。所以33.3vh指的是＆＃34; 1/3的视口高度＆＃34;。实际上，视口值具有可接受的支持：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中，结果如下：

enter image description here

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

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

3 个答案: