0

背景画像付きのこれら 2 つの DIV タグがあります。

<div class="content_bg">
    <div id="content">
        <div id="contentLeft">   
        </div>
        <div id="contentRight">            
        </div>
    </div>
</div>
<div class="footer_bg">
    <div id="footer">
        <div id="footerLeft">            
        </div>
        <div id="footerRight">           
        </div>
    </div>
</div>

contentの高さを手動で設定すると、すべて問題ないように見えますが、100% または Auto に設定すると、 content_bgの上にfooter_bgが重なります。誰か親切にアドバイスできますか？

/*
====================================================================
Content Area
====================================================================
*/

.content_bg
{
    background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top;

}

#content
{
    width:980px;
    margin:auto;
    height:auto;   
    background:white;     

}

#contentLeft
{
    float:left;
    width:209px; 
    margin-top:50px;   
}


#contentRight
{
    float:right;
    width:770px;     
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 11px;
    line-height:17px;
    border-left:1px solid;
    margin:20px 0 0 0;
}

/*
====================================================================
Footer
====================================================================
*/

.footer_bg
{
    background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top;

}

#footer 
{
    width:980px;
    height:258px;
    margin:auto;
    background:#dadad9 url(images/interior_footer.jpg) no-repeat center top;
}
#footerLeft
{
    width:400px;
    height:50px;   
    font-family:Verdana, Arial, sans-serif;
    font-size:11px;    
    line-height:25px;
    float:left;
    padding: 20px 0 0 25px;
    color:#fff;
}


#footerRight
{
    width:100px;
    height:50px;       
    float:right;
    padding: 20px 0 0 0;
}
4

2 に答える 2

0

コンテンツが受け入れるように、すべての親（本文とHTMLを含む）の高さを100％に設定する必要があります。または、コンテンツに{min-height：Npx}を設定するだけです。あなたの問題は、＃contentが必要な高さを知らないことです）

于 2013-02-19T18:44:25.860 に答える
0

コードとデモについては、フィドルを参照してください: http://jsfiddle.net/4Ly7E/1/

デモ: http://jsfiddle.net/4Ly7E/1/embedded/result

注：背景画像がないので、コンテンツとフッターの境界が境界であると想定しています。

.content_bg
{
    background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top;
    border:1px solid red; /* for visiblity */
    overflow:hidden;

}

.footer_bg
{
    background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top;
    border:1px solid teal; /* for visiblity */
    clear:both;
}
于 2013-02-19T18:53:42.873 に答える