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

【问题标题】：Two CSS container divs vertically aligned filling screen 50/50 (media query)两个 CSS 容器 div 垂直对齐填充屏幕 50/50（媒体查询）
【发布时间】：2014-12-03 23:07:01
【问题描述】：

我有两个可以在桌面上使用的容器，但在我的 iPhone 上，我希望两个容器都垂直填充屏幕 50/50 like this example。

在这种情况下，我想特别为 iPhone 使用 CSS 媒体查询，它已经在下面的 CSS 中可见。我很难弄清楚如何让这些容器正确，所以两者都会垂直显示 50% 的图像，并自动适应全宽。我如何获得这些容器？以下是 HTML 和 CSS：

#container {
  width: 500px;
  margin: auto !important;
  display: block;
  height: 500px;
  position: relative;
  list-style-type: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#container2 {
  width: 500px;
  margin: auto !important;
  padding-top 200px;
  display: block;
  height: 500px;
  position: relative;
  list-style-type: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.buddy {
  display: none;
  color: #fff;
  padding: 20px;
  width: 360px;
  height: 360px;
  top: 50px;
  left: 50px;
  position: absolute;
  cursor: hand;
}

.buddy2 {
  display: none;
  color: #fff;
  padding: 20px;
  width: 360px;
  height: 360px;
  top: 50px;
  left: 50px;
  position: absolute;
  cursor: hand;
}

.avatar {
  background: #fff;
  width: 340px;
  height: 340px;
  display: block;
  margin-top: 10px;
  margin-left: 10px;
  background-size: 100% auto !important;
  background-position: center;
 background-repeat: no-repeat;
}


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

/* iPhone media query */
  
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="container">
    <div class="buddy" style="display: block;"><div class="avatar" background-image: url(http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg)"></div></div>
    <div class="buddy"><div class="avatar" style="display: block; background-image: url(http://stylonica.com/wp-content/uploads/2014/03/Cat-cats-32040775-1440-900.jpg)"></div></div>  
    <div class="buddy"><div class="avatar" style="display: block; background-image: url(http://cbsnews2.cbsistatic.com/hub/i/r/2014/04/15/4ea65e0b-4b11-43d8-9751-1a52f7a9fc3a/thumbnail/620x350/75a030bb4fb3f6576ddaa6e44371d0f1/cat-istock-000025213483.jpg)"></div></div>  
    <div class="buddy"><div class="avatar" style="display: block; background-image: url(http://cdn.inquisitr.com/wp-content/uploads/2014/06/BnYHSYlIYAAn9gj-1.png)"></div></div>  
  </div>
  
    <div id="container2">
    <div class="buddy2" style="display: block;"><div class="avatar" background-image: url(http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg)"></div></div>
    <div class="buddy2"><div class="avatar" style="display: block; background-image: url(http://stylonica.com/wp-content/uploads/2014/03/Cat-cats-32040775-1440-900.jpg)"></div></div>  
    <div class="buddy2"><div class="avatar" style="display: block; background-image: url(http://cbsnews2.cbsistatic.com/hub/i/r/2014/04/15/4ea65e0b-4b11-43d8-9751-1a52f7a9fc3a/thumbnail/620x350/75a030bb4fb3f6576ddaa6e44371d0f1/cat-istock-000025213483.jpg)"></div></div>  
    <div class="buddy2"><div class="avatar" style="display: block; background-image: url(http://cdn.inquisitr.com/wp-content/uploads/2014/06/BnYHSYlIYAAn9gj-1.png)"></div></div>  
  </div>
</body>
</html>

您可以在这里查看代码并调整它http://jsfiddle.net/zu2q9rh4/1/

【问题讨论】：

开始你应该在这里修复你的 HTML 标记：<div class="avatar" background-image: url(http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg)"></div>

标签： css media-queries

【解决方案1】：

为了让您的容器填满屏幕，您必须使用 width: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
}

【讨论】：

谢谢！我已将两个容器与您的代码一起放入父容器中。它几乎可以工作，现在对齐似乎很好。但它仍然不会填满屏幕（见结果postimg.org/image/ensof32z7）。怎么解决？
将宽度设置为 100%
做到了吗@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { #parentContainer{ height:500px; } #container, #container2{ height:50%; width: 100%; }
但是当我将它设置为宽度 100% 时，块会向左移动。见postimg.org/image/ph68yb0gj
也将.avatar 设置为width:100%