1

私は、高さ自動を使用してコンテンツdivの高さを設定し、最小高さを100％に設定して、コンテンツdivが常にページの高さを伸ばすようにしているWebサイトを持っています。

私の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％は、ホルダーdiv（グループの最も外側のdiv）で機能しますが、どのブラウザーのoutercontentまたはinnercontentでも機能しません。

どうしてこれなの？

4

1 に答える 1

0

deleveloperツールを使用してIEでソースを開いてみてください。何かが高さをオーバーライドしていると思いますが、正確な画像が得られます。

于 2012-11-22T22:59:41.840 に答える