Divは親の％の代わりに高さを取得します

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>