背景颜色不显示为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; 
}

心灵添加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; 
}

谢谢！它现在有效！ – 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％。

其实我是。我只是修改了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“内容”中的内容将定义宽度和高度。

答

由于您未清除浮标，因此将背景应用于#content时遇到问题。添加

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

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

背景颜色不显示为DIV

相关推荐