如何用CSS填充父元素的背景颜色？

Question

这里是jsfiddle。

HTML：

<div class="wrapper"> 
    <div class="header"></div> 
    <div class="main"> 
     <div class="main-header"></div> 
     <div class="main-content"> 
      <p>SOME TEXTS HERE</p> 
     </div> 
    </div> 
</div> 

CSS：

body, html{ 
    height: 100%; 
} 

.wrapper{ 
    margin: 0 auto; 
    max-width: 480px; 
    height: 100%; 
    background-color: #000; 
} 

.header{ 
    height: 130px; 
    background-color: #356aa0; 
} 

.main{ 
    margin: -100px 20px 0; 
    height: 100%; 
} 

.main-header{ 
    height: 130px; 
    background-color: #232729; 
} 

.main-content{ 
    background-color: #fff; 
} 

.main-content p{ 
    margin: 0 20px; 
    padding: 20px 0; 
    font-weight: bold; 
} 

如果 “主要内容” 容器中的文本，滚动就会显示出来。但是，黑色背景颜色不会被填充。
有人能帮我一把吗？
干杯！

Answer 1

你可以只使用：

body { 
    background-color: #000; 
} 

但除此之外，你的问题是在你的100％包装的固定高度。要么删除它或改变它以最小高度：

.wrapper{ 
    margin: 0 auto; 
    max-width: 480px; 
    min-height: 100%; 
    background-color: #000; 
} 

Answer 2

而不是使用height: 100%作为包装，您需要使用height: auto。 height: 100%将计算当前仅高于视口高度的相对于身体（父）的高度。

Updated JSfiddle

body, 
 
html { 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 480px; 
 
    height: auto; 
 
    background-color: #000; 
 
} 
 
.header { 
 
    height: 130px; 
 
    background-color: #356aa0; 
 
} 
 
.main { 
 
    margin: -100px 20px 0; 
 
    height: 100%; 
 
} 
 
.main-header { 
 
    height: 130px; 
 
    background-color: #232729; 
 
} 
 
.main-content { 
 
    background-color: #fff; 
 
} 
 
.main-content p { 
 
    margin: 0 20px; 
 
    padding: 20px 0; 
 
    font-weight: bold; 
 
}

<div class="wrapper"> 
 
    <div class="header"></div> 
 
    <div class="main"> 
 
    <div class="main-header"></div> 
 
    <div class="main-content"> 
 
     <p>One dollar and eighty-seven cents. That was all. And sixty cents of it was in pennies. Pennies saved one and two at a time by bulldozing the grocer and the vegetable man and the butcher until one's cheeks burned with the silent imputation of parsimony 
 
     that such close dealing implied. Three times Della counted it. One dollar and eighty- seven cents. And the next day would be Christmas.</p> 
 
     <p>There was clearly nothing to do but flop down on the shabby little couch and howl. So Della did it. Which instigates the moral reflection that life is made up of sobs, sniffles, and smiles, with sniffles predominating.</p> 
 
     <p>While the mistress of the home is gradually subsiding from the first stage to the second, take a look at the home. A furnished flat at $8 per week. It did not exactly beggar description, but it certainly had that word on the lookout for the mendicancy 
 
     squad.</p>　　 
 
     <p>In the vestibule below was a letter-box into which no letter would go, and an electric button from which no mortal finger could coax a ring. Also appertaining thereunto was a card bearing the name "Mr. James Dillingham Young."</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

取出高度，并添加填充底到您的包装

See here: Jsfiddle

 .wrapper{ 
     margin: 0 auto; 
     max-width: 480px; 
     /*height: 100%;*/ 
     background-color: #000; 
     padding-bottom: 50px; 
     }