CODEWITHSUNDEEP
htmlcss
user3760941
user3760941

Reputation: 528

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 all parental divs to 100% but in this case it doesn’t do anything - neither does setting a html height to 100%.

Can someone figure out what’s wrong with my code? Thanks for the advice

#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: 0 0 0 25px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0 0 0;
    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;
    height: auto;
    background: #f00;
    margin: 0 auto;
    text-align: center;
}
<!-- BOOTSTRAP -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
        <div class="stretched-container">
            <div id="sharing">
                <span class="f1">Share page</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div id="newsletter">
                <span class="f1">Newsletter Signup</span>
                <span class="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 class="clear"></div>
        </div>
    </footer>

Upvotes: 0

Views: 182

Answers (4)

frnt
frnt

Reputation: 8795

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: 50px 0 0 0;
  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: 0 0 0 25px;
  display: table-cell;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
  <div class="stretched-container">
    <div id="sharing">
      <span class="f1">Share page</span>
      <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
    </div>
    <div id="newsletter">
      <span class="f1">Newsletter Signup</span>
      <span class="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>

Upvotes: 1

yasarui
yasarui

Reputation: 6563

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: 0 0 0 25px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0 0 0;
    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 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
        <div class="stretched-container">
            <div id="sharing">
                <span class="f1">Share page</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div id="newsletter">
                <span class="f1">Newsletter Signup</span>
                <span class="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 class="clear"></div>
        </div>
    </footer>

Upvotes: 0

Victor Allegret
Victor Allegret

Reputation: 2394

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: 0 0 0 25px;
}

#footer-wrap {
    width: 100%;
    height: auto;
    background: #00f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0 0 0;
    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 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<footer id="footer-wrap">
        <div class="stretched-container">
            <div id="sharing">
                <span class="f1">Share page</span>
                <span class="f2">Lorem ipsum dolor sit amet et delectus accommodare... Lorem ipsum dolor sit amet et delectus accommodare</span>
            </div>
            <div id="newsletter">
                <span class="f1">Newsletter Signup</span>
                <span class="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 class="clear"></div>
        </div>
    </footer>

Upvotes: 1

silicakes
silicakes

Reputation: 6902

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.

Upvotes: 0

Related Questions