Div获得0高度而不是其父级的％

Question

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

这里也是jsfiddle链接：https://jsfiddle.net/zuymamq7/

＆＃13;

＆＃13;

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

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当我开始编辑时，我注意到了最重要的事情：

您添加了一个关闭图片代码（</img>）。那些不存在。正确的语法是<img src="something.jpg">或更具技术性<img src="something.jpg" />丢掉一些东西（特别是在编辑器中）

我认为这是你想要的，或者至少，我希望。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

其他方式

如果你可以改变一下HTML，那么这也应该有用。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;