HTML/CSS - IE 中的 div 没有 100% 的高度答案

【问题标题】：HTML/CSS - No 100% height on div in IEHTML/CSS - IE 中的 div 没有 100% 的高度
【发布时间】：2010-03-23 18:02:14
【问题描述】：

好的，我有一个问题 - 我很想解决它。

我正在使用我最喜欢的方式来设置简单的页眉/内容/页脚布局。问题是我添加到布局的“内容”div 中的任何元素都无法在 Internet Explorer 中扩展到 100%（据我所知，仅限 IE）。我知道没有为“内容”元素声明高度，但由于其定位样式（声明绝对顶部和底部），该元素填充了所需的区域。（内容元素定义了背景颜色，因此您可以看到 div 实际上填充在页眉和页脚之间。）

所以我的问题是，既然 div 显然在两者之间扩展，为什么不能将孩子设置为 100% 来填充该区域？如果有人有任何解决方案，我很想听听。（我正在寻找一种不涉及通过完全不同的布局进行设计的解决方案。或者至少可以解释为什么会发生这种情况。我假设此时这是因为缺少高度声明 - - 但是 div 被扩展了，所以我不明白！）

这是页面上使用的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="robots" content="noindex" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>No 100% height on 'content' child div in IE</title>
    </head>
    <style>
    html, body {
     width:100%;
     height:100%;
     margin:0px;
     padding:0px;
    }
    body {
     position:relative;
    }
    #wrapper {
     position:absolute;
     top:0px;
     width:960px;
     height:100%;
     left:50%;
     margin-left:-480px;
    }
     #header{
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:200px;
      background-color:#999;
     }
     #content{
      position:absolute;
      top:100px;
      bottom:50px;
      left:0px;
      width:100%;
      background-color:#F7F7F7;
     }
      #content_1{
       width:200px;
       background-color:black;
       height:100%;
       float:left;
      }
     #footer{
      position:absolute;
      bottom:0px;
      left:0px;
      width:100%;
      height:50px;
      background-color:#999;
     }  
    </style>

    <body>
    <div id="wrapper">
     <div id="header">
        </div>
        <div id="content">
         <div id="content_1">
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
    </body>
    </html>

【问题讨论】：

对我来说似乎在 IE8 中工作。当我打开兼容模式时，我确实看到黑色边栏不是全高。
你能给出一个具体的问题例子吗？你的意思是孩子不会填满这个区域？您具体观察到什么问题？一两张图片可能会有所帮助。
原始帖子中包含代码和工作示例的链接...
我看到了该页面，但没有任何问题。

标签： html css internet-explorer height

【解决方案1】：

试试这个：

#content_1{
width:200px;
background-color:black;
height:100%;
position: absolute;
}

IE 7 及以下版本为需要定位的元素分配一个名为“hasLayout”的值。有时要解决这样的小怪癖，您必须强制项目具有布局，在这种情况下，这意味着将其位置设置为绝对。

【讨论】：

哇——这真的奏效了！！！在我使用类似代码的网站上，元素是浮动的，所以我没有考虑绝对定位它们。你是我这个月的救星彼得！非常感谢。（伙计 - 我虽然 hasLayout 的日子已经结束了......我猜我错了） PS - 如果它是浮动的，是否有一种简单的方法可以将 hasLayout 添加到 div 中？（只是出于好奇，因为我不需要它）。
我的 goto hasLayout 样式始终是“zoom:1;”
很高兴我能帮上忙！如果我没记错的话，有几种方法可以触发 hasLayout 标志，而无需实际更改 div 上的任何内容，但由于大多数情况都非常独特，因此很难确切地说如果 div 处于浮动状态会起作用。一旦你知道了问题的名称，虽然它更容易找到答案。