CODEWITHSUNDEEP
htmlcss
SPG
SPG

Reputation: 6197

How to fill parent element background color with CSS?

here is the 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;
}

If the texts in "main-content" container, the scroll will be displayed. But, the black background color won't be filled.
Could someone give me a hand?
Cheers!

Upvotes: 1

Views: 5717

Answers (3)

V&#233;ronique
V&#233;ronique

Reputation: 138

Remove the heights and add a padding-bottom to your wrapper

See here: Jsfiddle

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

Upvotes: 0

m4n0
m4n0

Reputation: 32355

Instead of using height: 100% for the wrapper, you need to use height: auto. height: 100% will calculate the height with respect to the body(parent) which is only up to the view port height currently.

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>

Upvotes: 1

Alejalapeno
Alejalapeno

Reputation: 1018

You could just use:

body {
    background-color: #000;
}

But otherwise your problem is the fixed height on your wrapper of 100%. Either remove it or change it to min-height:

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

Upvotes: 0

Related Questions