Inner Div's Height Not Stretching Down To 100% Size

I’m trying to get the green div’s height to stretch to 100% of the size, covering the red div and can’t figure out what’s wrong. Other posts suggest setting the height of a

Solution 1:

Here height of parent div is auto, which will only increase when any one of child div i.e. .sharing or .newsletter height increase which too are 100%. Now to have height of both child div 100% as of parent then whether it's fully filled by data or not it needs to be 100%, so for that you could display them in table format.

#footer-wrap {
  width: 100%;
  height: auto;
  background: #00f;
  margin: 0 auto 50px auto;
  overflow: auto;
  padding: 50px000;
  margin: 0;
  display: table;
}

.stretched-container {
  max-width: 960px;
  height: auto;
  background: #f00;
  margin: 0 auto;
  text-align: center;
  display: table;
}

#sharing {
  background: lightgreen;
  width: 44%;
  height: 100%;
  padding-right: 25px;
  border-right: 2px solid yellow;
  display: table-cell;
}

.f1 {
  display: block;
  text-transform: uppercase;
  color: darkblue;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 15px;
}

.f2 {}

#newsletter {
  background: lightblue;
  width: 56%;
  height: 100%;
  padding: 00025px;
  display: table-cell;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"type="text/css" /><footerid="footer-wrap"><divclass="stretched-container"><divid="sharing"><spanclass="f1">Share page</span><spanclass="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span></div><divid="newsletter"><spanclass="f1">Newsletter Signup</span><spanclass="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span></div></div></footer>

Solution 2:

You might use a defined height on the parent div, and maybe use flexbox instead of float: left should be easier.

#sharing {
    background: lightgreen;
    width: 44%;
    height: 100%;
    padding-right: 25px;
    border-right: 2px solid yellow;
}

#newsletter {
    background: lightblue;
    width: 56%;
    height: 100%;
    padding: 00025px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px000;
    margin: 0;
}

.f1 {
    display: block;
    text-transform: uppercase;
    color: darkblue;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 15px;
}

.f2 {}

.clear { clear: both; }

.stretched-container {
    max-width: 960px;
    /* Defined height */height: 350px;
    background: #f00;
    /* flexbox */display: flex;
    margin: 0 auto;
    text-align: center;
}

<!-- BOOTSTRAP --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"type="text/css" /><footerid="footer-wrap"><divclass="stretched-container"><divid="sharing"><spanclass="f1">Share page</span><spanclass="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span></div><divid="newsletter"><spanclass="f1">Newsletter Signup</span><spanclass="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span></div><divclass="clear"></div></div></footer>

Solution 3:

In order for the child to be a 100% - its parent's height should be defined to something other than auto.

add the following css code

html,#stretched-container,#footer-wrap {
  height: 100%;
}

or set the height of each of these elements to the one you desire.

Solution 4:

Add display flex to the #footer-wrap

#sharing {
    background: lightgreen;
    width: 44%;
    height: 100%;
    float: left;
    padding-right: 25px;
    border-right: 2px solid yellow;
}

#newsletter {
    background: lightblue;
    width: 56%;
    height: 100%;
    float: left;
    padding: 00025px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px000;
    margin: 0;
    display:flex
}

.f1 {
    display: block;
    text-transform: uppercase;
    color: darkblue;
    font-size: 20px;
    line-height: 1;
    padding-bottom: 15px;
}

.f2 {}

.clear { clear: both; }

.stretched-container {
    max-width: 960px;
    height: auto;
    background: #f00;
    margin: 0 auto;
    text-align: center;
}

<!-- BOOTSTRAP --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"type="text/css" /><footerid="footer-wrap"><divclass="stretched-container"><divid="sharing"><spanclass="f1">Share page</span><spanclass="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span></div><divid="newsletter"><spanclass="f1">Newsletter Signup</span><spanclass="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodareLorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span></div><divclass="clear"></div></div></footer>