Question

我有一个网站，我使用高度自动设置内容div的高度和最小高度100％，以确保内容div始终拉伸页面的高度。

我的HTML看起来像这样

<html>
<body>
 <div id="holder">
  <div id="outercontent">
   <div id="innercontent">
    content goes here
   </div>
  </div>
 </div>
</body>
</html>

我的css规则如下

html,body {
    height:100%;
    color:white;
}

#holder {
    background-color:transparent;
    width:100%;
    min-height:100%;
    height:auto;
    position:absolute;
    z-index:1;
}
#outercontent {
    min-height:100%;
    height:auto;
    width:940px;
    margin-left:auto;
    margin-right:auto;
    background-color:transparent;
    background-image:url(../images/bowsides.png);
    background-repeat:no-repeat;
    overflow:hidden;
}
#innercontent {
    width:900px;
    height:auto;
    min-height:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#ffefce;
    overflow:hidden;
}

持有者div是绝对定位的DIV，我需要这个，因为我有一个旋转背景，将每个背景图像放在一个单独的绝对定位的div上。所以这个div使用z-index放在所有这些div之上。

外部内容比我的内部内容略宽，这用于给我空间放置边框图像（因为css3边框图像还没有被广泛支持）

内在内容是我的主要内容区域

min-height 100％适用于holder div（即组的最外层div），但它不适用于任何浏览器中的outercontent或innercontent

为什么会这样？

Answer 1

你可以尝试使用开发者工具在IE中打开源代码，我猜有些东西会覆盖高度，你会得到确切的图片然后

min-height不使用多个子div

1 个答案: