HTML/CSS-IE中div没有100%高度_Html_Css_Internet Explorer_Height

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

html css internet-explorer

HTML/CSS-IE中div没有100%高度,html,css,internet-explorer,height,Html,Css,Internet Explorer,Height,好吧，我有个问题-我很想把它修好我正在使用我最喜欢的方式设置一个简单的页眉/内容/页脚布局。问题是，我在布局的“内容”分区中添加的任何元素都无法在Internet Explorer中扩展到100%（据我所知，仅限于IE）。我知道“content”元素没有声明高度，但由于其位置的样式（声明绝对顶部和底部），元素填充了所需的区域。（content元素定义了背景色，因此可以看到div实际上填充在页眉和页脚之间。）所以我的问题是，既然div在两者之间明显扩展，为什么不能将一个孩子设置为100%来

好吧，我有个问题-我很想把它修好

我正在使用我最喜欢的方式设置一个简单的页眉/内容/页脚布局。问题是，我在布局的“内容”分区中添加的任何元素都无法在Internet Explorer中扩展到100%（据我所知，仅限于IE）。我知道“content”元素没有声明高度，但由于其位置的样式（声明绝对顶部和底部），元素填充了所需的区域。（content元素定义了背景色，因此可以看到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>


IE中“内容”子分区没有100%高度
html，正文{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
身体{
位置：相对位置；
}
#包装纸{
位置：绝对位置；
顶部：0px；
宽度：960px；
身高：100%；
左：50%；
左边距：-480px；
}
#标题{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100%；
高度：200px；
背景色：#999；
}
#内容{
位置：绝对位置；
顶部：100px；
底部：50px；
左：0px；
宽度：100%；
背景色：#F7F7F7；
}
#内容1{
宽度：200px；
背景色：黑色；
身高：100%；
浮动：左；
}
#页脚{
位置：绝对位置；
底部：0px；
左：0px；
宽度：100%；
高度：50px；
背景色：#999；
}

试试这个：

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

IE 7及以下版本为需要定位的元素指定一个名为“hasLayout”的值。有时为了解决像这样的小问题，你必须强迫一个项目有一个布局，在这种情况下，这意味着将其位置设置为绝对。

在IE8中对我来说似乎是可行的。当我打开兼容模式时，我确实看到黑色侧边栏不是完整高度。你能给出一个具体的问题示例吗。你说孩子不占这个区域是什么意思？具体来说，你观察到了什么问题？一张或两张图片可能会有所帮助。原始帖子中包含了代码和一个工作示例的链接……我看到了页面，但没有发现任何问题。哇-这确实有效！！！在我使用类似代码的站点上，元素是浮动的，所以我不想绝对定位它们。你是我本月的救世主，彼得！非常感谢。（男-我想hasLayout时代已经过去了…我猜我错了）PS-如果它是浮动的，有没有简单的方法将hasLayout添加到div中？（只是出于好奇，因为我不需要它）。我的goto hasLayout风格总是“zoom:1”；很高兴我能帮上忙！如果我没记错的话，有几种方法可以触发hasLayout标志而不改变div上的任何内容，但是由于大多数情况都是如此独特，因此很难说如果div是浮动的，那么什么方法会起作用。一旦你知道了问题的名称，找到答案就容易多了。