Div获取0高度代替其父母的百分比

Question

在下面的代码中，红色背景的div在图像存在时获取0高度，但图像节点已移除，它从父级获得60px的正确高度。为什么它是如此以及如何纠正？

这里也是的jsfiddle链接：

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
}

<table style="width:100%;height:100%;"> 
 
     <tr style="height:60px;"> 
 
     <td> 
 
      <div style="width:100%; height:100%; background-color:blue;"> 
 
      <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img> 
 
      <div style="display:inline-block;width: 10%; height:100%; background-color:red;"> 
 
      </div> 
 
      </div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
     </td> 
 
    </tr> 
 
    </table>

Answer 1

，我注意到当我开始编辑这个

最大看点：

您添加了密切的图像标签（</img>） 。那些不存在。正确的语法是要么<img src="something.jpg">或在技术上<img src="something.jpg" />摆脱了一些东西很多（尤其是在编辑器）

我在想这就是你想要的，或者至少，我希望。

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<table style="width:100%;height:100%;"> 
 
    <tr> 
 
    <td style="height:60px"> 
 
     <div style="width:100%; height:100%; background-color:blue;"> 
 
     <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" /> 
 
     <div style="display:inline-block;width: 10%; height:100%; background-color:red;"> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
    </td> 
 
    </tr> 
 
</table>

其他办法

如果你可以改变了HTML一点，那么这应该工作了。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
}

<table style="width:100%;height:100%;"> 
 
    <tr style="background-color:blue"> 
 
    <td style="height:60px;width:60px;"> 
 

 
     <img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" /> 
 
    </td> 
 
    <td style="background-color:red; width:10%"> 
 
     
 
     Text 
 
     
 

 
    </td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
    </td> 
 
    </tr> 
 
</table>