正文背景颜色出现在整个站点div中

Question

很多次在通过body标签创建全背景时都遇到过这个问题。如果body标签的背景是蓝色，那么网站中所有的小div标签都会显示相同的颜色。甚至主div背景也不工作。在这种情况下，我特别制作所有div background-none。请告诉我有什么办法可以解决这个问题。

<header><div class="inner">
        <div class="h-top"><div class="left blue-text">Traditional Print • Social Syndication • Embedded Video • Radio</div> <div class="right"> [phone] <img src="images/in.png" alt="" align="absmiddle" title="linkedin.com"  />  <img src="images/twitter.png" alt="" align="absmiddle" title="twitter.com"  /> <img src="images/facebook.png" align="absmiddle" alt="" title="facebook.com"  /> <img src="images/bloger.png" alt="" align="absmiddle" title="linkedin.com"  /></div></div>
        <div class="clear"></div>
        <div class="h-bottom"><div class="left"><img src="images/logo.png" alt="" title="" /></div>
        <nav class="right"> 
            <ul>          
                <li>Our Guarantee</li>
                <li> Our Difference  </li>
                <li>What We Do </li>
                <li> Our Clients </li>
                <li>Contact</li>
            </ul>
        </nav>
        </div><!--h-bottom-->
      </div><!--inner-header-->    
    </header>


*{
    margin:0;
    padding:0;
    text-decoration:none;
    font-style:normal;
    color:#011c2d;
    font-size:17px;
    background:#d2d2d2;
    font-family:'schoolbookregular';
}
.main{
    width:1082px;
    margin:0 auto;
    background:#f5f5f5;
}
.inner{
    margin:0 50px;
}
.left{
    float:left;
}
.right{
    float:right;
}
.h-top{
    padding:20px 0;
    display: inline-block;
    width: 100%;
}
.blue-text{
    color:#0067b0;
    font-size: 15px;
}
.h-bottom{
    margin: 20px 0;
    display: inline-block;
    width: 100%;
}
header{
    font-family:'schoolbookregular';
}
nav{
    margin:17px 0 0 0;
}
nav>ul{
    marigh:0;
    padding:0;
}
nav>ul>li{
    float:left;
    padding:7px 15px;
    margin-left:7px;
    color:#fff;
    background:#0067b0;
    list-style:none;
}

Answer 1

问题是默认情况下。main的高度为0，因此您无法看到任何输出。尝试将高度更改为500px或其他您喜欢的值。

/*If you want a background color to body do it here, not on '*' */
body {
    min-height: 100%;
    background: #0000ff;
}
.main {
    /* other styles */
    min-height: 500px;
}

Answer 2

如果你想设置正文背景，请明确使用

body {
    background: #d2d2d2;
}

你不应该设置*的背景，这通常会导致大量的覆盖，这是不太好的

Answer 3

更好的解决方法是在没有内容的页面中引入一个新的'div'标签。这将帮助你…!