CSS DIV高度背景圖像重疊

我有這兩個DIV標籤與背景圖像。CSS 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>

如果我手動設置內容的高度，一切看起來正常，但如果我將它設置爲100％或自動，對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; 
}

來源

2013-02-19 user1781367

您可以請創建一個小提琴，以便我們可以輕鬆地看到問題的確切位置。 – w3uiguru 2013-02-19 18:43:39

請看看我的回答，並告訴我是否在某些地方滯後。我沒有信心，因爲我沒有看到背景圖片。如果可能的話，請展示真正的問題。 – w3uiguru 2013-02-19 18:57:23

見搗鼓代碼和演示：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-19 18:53:42 w3uiguru

謝謝。它固定了頁腳，將其從內容bg中推開並放置在正確的區域。有沒有辦法顯示content_bg圖像而不是隱藏？ – user1781367 2013-02-19 19:51:25

嘿，快樂，有沒有辦法將背景顏色應用於內容？一切正常，除了內容背景顏色不顯示.. – user1781367 2013-02-19 20:43:00

@nana如果你可以告訴我所需的佈局，我可以解決你有關佈局，CSS和互動等問題。向我展示屏幕截圖，附上你的BG圖像，讓我可以看到圖像的寬度和高度並據此編寫代碼。你幫我我幫你:-) – w3uiguru 2013-02-20 01:52:58

，你應該爲所有的父母身高100％（包括身體和HTML）爲您的內容接受。或者只是爲內容設置{min-height：Npx}。你的問題是＃內容不知道需要什麼高度）

來源

2013-02-19 18:44:25 starowere

嗨帕維爾，我的問題是，內容是從其CMS數據庫生成的。而最小高度不會這樣做，因爲這個頁面將在每個高度不同的頁面中使用。 – user1781367 2013-02-19 19:00:59

CSS DIV高度背景圖像重疊

回答

相關問題