为什么我的DIV儿童的身高不如父母

我一直在为此奋斗一段时间，而且我似乎找不到任何解决方案。我有一个框架，一个机顶盒，一个左箱和右边框和包含最后两个中间箱。为什么我的DIV儿童的身高不如父母

我想这是框架减去机顶盒的高度的高度。这会导致框架被填满，只剩下一点也没有。

我现在的代码有什么问题，以及什么是实现这个目标的正确方法？

下面的代码：

<html> 
    <head> 
     <style type="text/css"> 
      #frame { 
       width: 800px; 
       min-height: 500px; 
       border: 1px solid black; 
      } 

      #top { 
       width: 800px; 
       height: 80px; 
       float: left; 
       background-color: #666; 
      } 

      #middle { 
       width: 800px; 
       height: 100%; 
       float: left; 
      } 

      #left { 
       width: 200px; 
       height: 100%; 
       float: left; 
       background-color: #B3B4BD; 
      } 

      #right { 
       width: 600px; 
       height: 100%; 
       float: left; 
       background-color: #99BC99; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="frame"> 
      <div id="top">Top</div> 

      <div id="middle"> 
       <div id="left">Left</div> 
       <div id="right">Right</div> 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-01-09 Patrick Reck

无需浮动“中间” - 它旁边没有任何东西。 –

尝试使用比例，而不是确切像素。

 #frame { 
     width: 80%; 
     min-height: 500px; 
     border: 1px solid black; 
     margin-right:auto; 
     margin-left:auto; 

     } 

     #top { 
      width: 100%; 
      height: 80px; 
      float: left; 
      background-color: #666; 
     } 

     #middle { 
      width: 100%; 
      height: 100%; 
      float: left; 
     } 

     #left { 
      width: 33%; 
      height: 100%; 
      float: left; 
      background-color: #B3B4BD; 
     } 

     #right { 
      width: 66%; 
      height: 100%; 
      float: left; 
      background-color: #99BC99; 
     }

jsFiddle

这是你的演示与更新的CSS截图： Screenshot of your demo with updated CSS