1

我有一个网站，我使用高度自动设置内容 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 放置在它们之上。

外部内容比我的内部内容宽一点，这用于给我空间放置边框图像（因为尚未广泛支持 css3 边框图像）

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

min-height 100% 适用于 holder div（即组的最外层 div），但不适用于任何浏览器中的外层内容或内层内容

为什么是这样？

4

1 回答 1

0

Can you try opening the source in IE by using deleveloper tools , I guess something is overriding the height , you will get the exact picture then

于 2012-11-22T22:59:41.840 回答