html - div 的全高

Question

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

#header {
  background-color:#7b88d2;
  text-align:center;
  height: 20px;
}
#container {
  max-width:800px;
  border-style: solid;
  border-width: 1px;
}
#main {
  width: 100%;
  height: 100%;
}
#photo  {
  float:left;
  background-color:#FF3366;
  padding: 10px;
}
#logo  {
  float:right;
  background-color:#FF3366;
  padding-right: 10px;
  height: 100%;
}
#footer {
  background-color:#669933;
  text-align:center;
  height: 20px;
}
#col1 {
  float: left;
  padding-left: 10px;
}
#col2 {
  margin-left:auto;
  margin: 0 auto;
}
#txt_container {
  padding-left: 10px;
  background-color:#ffffcc;
}
#col3 {
  display: inline;
  float: right;
  padding-right: 10px;
}

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

此处演示:https://jsfiddle.net/wsfnqvyn/

感谢您的帮助。

Answer 1

听起来很无意义。图片可以小于或高于您的 div(我不知道它是否与您要解释的内容相关)。尝试改用 css 后台方法。

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

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

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

.photo {
background-size: cover;
}

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