html - 如何用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;
}

如果“main-content”容器中的文本，将显示滚动条。但是，黑色背景颜色不会被填充。
有人能帮帮我吗？
干杯!

Answer 1

您需要使用 height: auto 作为包装器，而不是使用 height: 100%。 height: 100% 将计算相对于 body(parent) 的高度，当前仅达到视口(viewport)高度。

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>