Div erhält 0 statt Höhe der% seines Elternteils

Question

Im folgenden Code erhält div mit rotem Hintergrund 0 Höhe, wenn das Bild dort ist, aber mit Bildknoten entfernt, erhält es die richtige Höhe von 60px aus dem übergeordneten. Warum ist es und wie kann es korrigiert werden?

Hier ist auch der jsfiddle Link:

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

größte Sache, die ich bemerkte, wie ich diese zu bearbeiten begann:

Sie haben einen engen Bild-Tag (</img>) . Diese existieren nicht. Die korrekte Syntax ist entweder oder technischer <img src="something.jpg" /> Einige Dinge viel abgeworfen (vor allem im Editor)

Ich denke, das ist, was Sie wollen, oder zumindest hoffe ich.

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>

Other Way

Wenn Sie den HTML-Code ein wenig ändern kann, dann sollte dies auch funktionieren.

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>