css - 高度行为的解释

Question

考虑以下代码:

<div id="outer" style="height:250px;background:red">
line
  <div id="med" style="height:auto;background:#000" >
     line1
          <div id="inner" style="height:100%;background:blue">
              line2<br/>    
              line3<br/>    
              line4<br/>   
              line5          
          </div>
  </div>

<script>
alert($("#outer").height());
alert($("#med").height());
alert($("#inner").height());
</script>

上述警报的结果是:250、100、80。我希望是 250、100、100，因为 div inner 将具有 med div 的高度，因为高度:100%。我的三段论有什么问题？

谢谢

Answer 1

内部 div 的高度尽可能接近 100%，但文本“line1”占用了内部 div 本来可用的空间。因此，100 个中的 80px