背景顏色不顯示爲DIV

我不知道我在做什麼錯，但無法爲#content應用背景顏色。但它工作正常，如果我設置高度值讓說800px。但我希望它是自動的或100％，因爲此模板將在整個網站中使用。任何建議將不勝感激。背景顏色不顯示爲DIV

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

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

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

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

} 

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


#contentRight 
{ 
    float:right; 
    width:770px; 
    margin:20px 0 0 0; 
} 

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

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

#footer 
{ 
    width:980px; 
    height:258px; 
    margin:auto; 
    background:#dadad9 url(images/interior_footer.jpg) no-repeat center top; 
} 
#footerLeft 
{ 
    width:400px; 
    height:50px;  
    float:left; 
    padding: 20px 0 0 25px;  
} 

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

來源

2013-02-19 user1781367

心靈添加HTML以及之後？已添加 – PlantTheIdea 2013-02-19 21:06:48

。謝謝！ – user1781367 2013-02-19 21:09:22

你沒有內容。高度：自動;和高度：100％;仍然是0px高，因爲你裏面沒有任何東西。當你設置一個px高度時它的工作原因是因爲它強制了一個特定的高度。它不是說bg顏色沒有顯示，它的div是0px高。 – PlantTheIdea 2013-02-19 21:10:55

將#content的溢出設置爲自動。

#content { 
    width:980px; 
    margin:auto; 
    height:auto; 
    background:#fff; 
    overflow:auto; 
}

來源

2013-02-19 21:12:05 j08691

謝謝！它現在有效！ – user1781367 2013-02-19 21:21:47

它爲什麼有效？ – johnny 2014-11-03 21:44:33

@johnny - 因爲當孩子被浮動時內容會崩潰，並且添加溢出規則會恢復您期望的行爲。 – j08691 2014-11-03 21:46:34

問題是#content沒有內容。由於您使用height:100%作爲div的高度，因此它會擴展到其父div的全部高度（即.content_bg）。然而，.content_bg也沒有內容;因此它正在擴展到零的100％。

來源

2013-02-19 21:11:58 JSW189

其實我是。我只是修改了HTML代碼。抱歉。它是由服務器生成的，因爲它是CMS網站。 – user1781367 2013-02-19 21:14:01

嘗試添加類到您的ID <div id="content" class="content_bg">並刪除類。並給你的班級這些特性

.content_bg 
{ 
    background-color: white; 
    width: 100%; 
    height: 100%; 
}

然後你的ID「內容」中的內容將定義寬度和高度。

來源

2013-02-19 21:18:41

由於您未清除浮標，因此將背景應用於#content時遇到問題。添加

<div style="clear:both"></div>

<div id="contentLeft"> 
    </div> 
    <div id="contentRight"> 
     <div id="ContentPane" runat="server" />   
    </div>

來源

2013-02-19 21:18:43

背景顏色不顯示爲DIV

回答

相關問題