Html 全高

我搞不懂一个潜水艇怎么能承受集装箱的整个高度。 在下面的示例中，我希望“photo”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;
}

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

此处演示：

---

谢谢你的帮助。

听起来很无聊。图像可以比div小或高（我不知道它是否与您试图解释的内容相关）。尝试改用css背景方法

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

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

---

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

我更新了您的JSFIDLE：请参阅更新的：

我使用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;
}   

---

您好，谢谢，但出于某种原因，它将图片的大小减小为#photo:

#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;
}