内DIV高度不会扩大在IE7符合标准的模式填补绝对定位的外层div

问题描述：

这是怎么回事，怎么能解决吗？内DIV高度不会扩大在IE7符合标准的模式填补绝对定位的外层div

的下面的标记创建一个灰色的div扩展以适应窗口，但属于100个像素短的顶部边缘和右边缘。然后它创建一个内部的粉红色div应该填充整个灰色的div。

的元标记迫使我的IE8浏览器IE7中符合标准的模式来呈现 - 这也休息布局。粉红色的div不会填充以扩大其父项的整个高度。它显示为仅约20像素高。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
     <title></title> 
     <style type="text/css"> 
      #canvas { 
       background-color: #eee; 
       position: absolute; 
       top: 100px; 
       right: 100px; 
       bottom: 0; 
       left: 0; 
      } 
      .fill { 
       background-color: pink; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas"> 
      <div class="fill"></div> 
     </div> 
    </body> 
</html>

在现代浏览器（测试过的Firefox和Chrome）中，一切都看起来不错。

添加'的位置是：绝对的;'到内部DIV整理出来的，但我不知道是什么原因。如果有人提供，我会很感激的解释。谢谢。 – 2012-03-09 23:59:37

答

尝试重置 “CSS”：

/* RESET YOUR CSS CODE */ 
*{ margin:0;padding:0;outline:0;height:auto;... bla bla bla ....}

在你的HTML文档：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
     <title></title> 
     <style type="text/css"> 
      /* RESET CSS */ 
      *{ margin:0;padding:0;outline:0;height:auto; } 

      /* YOUR CODE */ 
      #canvas { 
       background-color: #eee; 
       position: absolute; 
       top: 100px; 
       right: 100px; 
       bottom: 0; 
       left: 0; 
      } 
      .fill { 
       background-color: pink; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas"> 
      <div class="fill"></div> 
     </div> 
    </body> 
</html>

感谢您的回应，但它不能解决问题。 – 2012-05-15 23:31:58

内DIV高度不会扩大在IE7符合标准的模式填补绝对定位的外层div

相关推荐