div的全高

Question

我无法弄清楚div如何占据容器的整个高度。 在下面的示例中，我希望“照片”div占据整个高度，以便黄色和绿色内容位于照片的右侧。 这是代码：

   SELECT t1.*
   FROM testing AS t1
   JOIN (
      SELECT fruits
      FROM testing 
      GROUP BY fruits
      HAVING COUNT(*) > 1
   ) AS t2 ON t1.fruits = t2.fruits
   ORDER BY t1.id

我无法以像素为单位声明高度，因为照片的高度是未知的。

在这里演示：array_sum()

感谢您的帮助。

Answer 1

听起来像是毫无意义的。图像可能比你的div更小或更高（我不知道它是否与您试图解释的内容相关）。尝试使用css背景方法。

e.g。定义.photo类的属性，然后将下面的代码插入到html中。

<div class="photo" style="background-image: url(image.jpg)"></div>

在这种情况下，你的.photo类至少应该包含这一行。

.photo {
background-size: cover;
}

请记住，在极少数情况下，此方法可能会限制某些CSS交互。

Answer 2

我更新了你的jsfiddle：请参阅更新的：source code

我使用display：table和table-cell来实现这一点。

#header {
   background-color:#7b88d2;
   text-align:center;
   height: 20px;
}
#container {
   max-width:800px;
   border-style: solid;
   border-width: 1px;
}
#main {
   width: 100%;
   height: 100%;
   display:table
}
#photo  {
   display:table-cell;
   background-color:#FF3366;
   padding: 10px;
}
#logo  {
   display:table-cell;
   background-color:#FF3366;
   padding-right: 10px;

}
#footer {
   background-color:#669933;
   text-align:center;
   height: 20px;
}
#col1 {
   float: left;
   padding-left: 10px;

}
#col2 {
   margin-left:auto;
   margin: 0 auto;
}
#txt_container {
  display:table-cell;
   padding-left: 10px;
   background-color:#ffffcc;
}
#col3 {
   display: inline;
   float: right;
   padding-right: 10px;
}