Question

好的，所以我遇到了问题 - 我很乐意解决这个问题。

我正在使用我最喜欢的方式设置简单的标题/内容/页脚布局。问题是我添加到布局的'content'div中的任何元素都无法在Internet Explorer中扩展到100％（据我所知，仅限IE）。据我所知，'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>

Answer 1

试试这个：

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

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

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

1 个答案: