两个CSS容器分区垂直对齐填充屏幕50/50（媒体查询）

我在桌面上有两个容器可以，但在我的iPhone上，我希望两个容器都能垂直填充屏幕50/50

我想在本例中特别针对iPhone使用CSS媒体查询，这在下面的CSS中已经可见。我很难弄清楚如何正确使用这些容器，所以两个容器都会垂直显示50%的图像，并自动调整其全宽。我怎样才能得到这些容器呢？以下是HTML和CSS：

#容器{
宽度：500px；
保证金：自动！重要；
显示：块；
高度：500px；
位置：相对位置；
列表样式类型：无；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#集装箱2{
宽度：500px；
保证金：自动！重要；
填充顶部200px；
显示：块；
高度：500px；
位置：相对位置；
列表样式类型：无；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.伙计{
显示：无；
颜色：#fff；
填充：20px；
宽度：360px；
高度：360px；
顶部：50px；
左：50px；
位置：绝对位置；
光标：手；
}
布迪先生2{
显示：无；
颜色：#fff；
填充：20px；
宽度：360px；
高度：360px；
顶部：50px；
左：50px；
位置：绝对位置；
光标：手；
}
.阿凡达{
背景：#fff；
宽度：340px；
高度：340px；
显示：块；
边缘顶部：10px；
左边距：10px；
背景尺寸：100%自动！重要；
背景位置：中心；
背景重复：无重复；
}
@仅媒体屏幕
和（最小设备宽度：320px）
和（最大设备宽度：480px）
和（方向：纵向）{
/*iPhone媒体查询*/
}

---

为了让您的容器填满屏幕，您必须使用

宽度：100%

，并将其添加到媒体查询中。这将水平跨越您的容器

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 

#container, #container2{
width:100%;
}

}

如果希望每个容器的高度都为屏幕高度的50%，可以找出设备的屏幕大小并将每个容器的高度设置为屏幕高度的一半，也可以将容器包裹在容器周围，并将子容器的高度设置为父容器高度的一半

<div id="parentContainer">
  <div id="container"></div>
  <div id="container2"></div>
</div><!--end parentContainer-->

#parentContainer{
height:500px;
}
#container, #container2{
height:50%; //this will be 50% of the parent container
}

#父容器{
高度：500px；
}
#集装箱#集装箱2{
高度：50%；//这将是父容器的50%
}

首先，您应该在此处修复HTML标记：

谢谢！我已将这两个容器与您的代码一起放在父容器中。它几乎可以工作了，现在对齐似乎很好。但它仍然无法填满屏幕（参见结果）。如何解决这个问题？将宽度设置为100%这样做了吗
@media-only屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）以及（方向：纵向）{parentContainer{height:500px；}container，{container2{height:50%；width:100%}
但当我将其设置为100%宽度时，块会向左移动。请参见将
.avatar
设置为
宽度：100%