Place element at the bottom of the wrapper with height 100%

Question

This is my code:

body,
html {
  height: 100%;
  color: white;
}

.wrapper {
  height: 100%;
}

.wrap-content1 {
  background-image: url(https://source.unsplash.com/random/600x600);
  min-height: 100%;
}

.wrap-content2 {
  min-height: 100px;
  background-color: green;
}

.footer {
  background-color: blue;
  text-align: right;
}

<div class="wrapper">
  <div class="wrap-content1">
    Wrapper Content 1
  </div>
  <div class="wrap-content2">
    Wrapper Content 2
  </div>
</div>

<div class="footer">
  This is a footer
</div>

I want to display the footer div at the bottom of the wrapper div which has a height of 100%.

I know this can be achieved by placing the footer div inside of the wrapper div, but it doesn't meet my requirements.

Answer 1

I suppose you want the wrap-content1 to be full height so use vh unit and you will avoid all the height:100% and thus no more overflow issue:

body,
html {
  color: white;
  margin: 0;
}

.wrap-content1 {
  background-image: url(https://source.unsplash.com/random/600x600);
  min-height: 100vh;
}

.wrap-content2 {
  min-height: 100px;
  background-color: green;
}

.footer {
  background-color: blue;
  text-align: right;
}

<div class="wrapper">
  <div class="wrap-content1">
    Wrapper Content 1
  </div>
  <div class="wrap-content2">
    Wrapper Content 2
  </div>
</div>

<div class="footer">
  This is a footer
</div>

Answer 2

I think your calculation is not right for .wrap-content1 and it makes the footer does not place at the bottom of .wrapper. You set height of .wrapper = 100%, but .wrap-content1 and .wrap-content2 are more than 100% of parent, this makes the .wrapper cannot wrap 2 children. When I set

.wrap-content1 {
    background-image: url(https://source.unsplash.com/random/600x600);
    min-height: 87%;
}

I can put the footer at the bottom of wrapper.