CSS 未显示 DIV 的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14967413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background color not showing for a DIV
提问by user1781367
I'm not sure what I'm doing wrong but having trouble applying background color for #content. But it works fine if I set the height value to let say 800px. but I want it to be either auto or 100% as this template will be used throughout the site. any advice would be greatly appreciated.
我不确定我做错了什么，但是在为#content 应用背景颜色时遇到了麻烦。但是如果我将高度值设置为 800px，它就可以正常工作。但我希望它是自动或 100%，因为该模板将在整个网站中使用。任何建议将不胜感激。
<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;
}
回答by j08691
Set the overflow to auto for #content.
将#content 的溢出设置为自动。
#content {
width:980px;
margin:auto;
height:auto;
background:#fff;
overflow:auto;
}
回答by JSW189
The problem is that #contenthas no content. Since you are using height:100%for the div's height, it will expand to the full height of its parent div (i.e. .content_bg). However, .content_bghas no content either; therefore it is expanding to 100% of zero.
问题是#content没有内容。由于您使用height:100%的是 div 的高度，它将扩展到其父 div 的完整高度（即.content_bg）。但是，.content_bg也没有内容；因此它正在扩展到零的 100%。
回答by Kenneth Kj?r Nielsen
Try adding the class to your id <div id="content" class="content_bg">and erase the class. And give your class these propertis
尝试将课程添加到您的 ID<div id="content" class="content_bg">并删除课程。并给你的班级这些财产
.content_bg
{
background-color: white;
width: 100%;
height: 100%;
}
Then the content in your id "content" will define the width and height.
然后你的id“content”中的内容将定义宽度和高度。
回答by Maciej Gurban
You are having a problem applying background to #contentbecause you didn't clear the floats. Add
您在应用背景时遇到问题，#content因为您没有清除浮动。添加
<div style="clear:both"></div>
After
后
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>
