title: How to fill parent element background color with CSS?
body: <p>here is the <a href="http://jsfiddle.net/ajpjseuo/" rel="nofollow">jsfiddle</a>.<br></p>
  
  <h1>HTML:</h1>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="header"&gt;&lt;/div&gt;
      &lt;div class="main"&gt;
          &lt;div class="main-header"&gt;&lt;/div&gt;
          &lt;div class="main-content"&gt;
              &lt;p&gt;SOME TEXTS HERE&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>CSS:</h1>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>If the texts in "main-content" container, the scroll will be displayed. But, the black background color won't be filled.<br> 
  Could someone give me a hand?<br> 
  Cheers!</p>