这是如何产生不等高div的？ [Firefox&IE] HTML:

如果取消注释

高度：100%

从

.content

中，然后您将看到等高

div

中的图像

所以，我的问题是：

---

在继承的

div

百分比计算中，如何在没有父

div

height

.img

->

.content

的情况下计算

.div

高度？

这可能不是答案

尽管我苦苦挣扎，但我发现，简而言之，这背后的

关键原因是原始大小的图像高度不同

让我们看看等高原始图像大小的演示：


但是，仅仅由于原始图像的大小，图像的高度行为仍然令人惊讶，而且在不同的浏览器中也有所不同。
简单地说，这就是你的问题：

演示：
.content{
高度：400px；
位置：相对位置；
}
.内容组{
浮动：左；
背景：黄色；边框：1px纯蓝色；
宽度：20%；高度：25%；
边缘：1米；
}

这个简化的演示显示了内容“工作”。关键部分是：


你的div有一定的高度
div的“包含块”具有明确的高度。

Super-important：注意
位置：relative
导致
.content
成为其子项的“包含”；如果没有此声明，将是用于定位的主体

…因此，div可以根据其位置计算其高度

如果从
.content
中删除
高度
，则此元素没有明确的高度，其高度取自其内容。当您在上面的演示中执行此操作并运行它时，您会看到div崩溃，完全没有高度，因为它们无法计算稍后将确定的百分比

在您的演示中，他们从不同高度的图像内容中获取其高度，这会导致他们的高度不同。
高度：25.5%
被完全忽略，因为父级没有明确的高度

根据财产：

百分比是根据生成的长方体包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），且该元素未绝对定位，该值将计算为“自动”

有关更多详细信息，请阅读CSS规范中的部分。
默认情况下，
显示：块的高度基于内容的高度。这就是我要问的，高度是如何计算的？为什么相同高度的div会有不同的高度？我不知道这里到底发生了什么，但是
.content
的高度为0，因为所有的子项都是浮动的。
.divs
上
25.5%
或
0
的高度没有多大意义，它似乎是Firefox和IE忽略了它，然后使用图像的20%宽度+比率来计算高度，Chrome似乎出于某种原因将图像（和div）拉伸到视口高度。@Danko评论道，只有在Chrome中，图像高度才等于100vh，Firefox和IE会产生不等的高度div。然后，图像使用了百分比高度，但这又被覆盖为
auto
，此时使用的高度值基于使用的宽度与图像宽高比的比率，这就是他们身高不同的原因。
<div class="content">
  <div class="img">
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
    <div class="divs">
      <img src="path.jpg" alt="" />
    </div>
  </div>    
</div>

html, body {
    height: 100%;
}

.content {
    /* height: 100%; */
    position: relative;
    width: 100%;
}

.img {
    height: 100%;
    margin-left: 0.5%;
    max-width: 100%;
    width: 100%;
}
.content .divs {
    border: 1px solid #b64024;
    float: left;
    height: 25.5%;
    margin: 1% 0.5% 0;
    overflow: hidden;
    width: 20%;
}
.content .divs img {
    height: 100%;
    width: 100%;
}