Как можно прижать футер когда мало контента в данном случае и футер вложен в правый блок?

Question

Подскажите пожалуйста как можно прижать футер когда мало контента в данном случае и футер вложен в правый блок? ссылка на мой макет

Answer 1

* {
  padding: 0;
  margin: 0;
}
body {
  width: 100%;
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100vh;
}
.nav {
  float: left;
  width: 30%;
  height: 100%;
  background-color: chocolate;
}
.wrp {
  float: right;
  position: relative;
  width: 70%;
  height: 100vh;
  background-color: gray;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background-color: red;
}

<div class="wrapper">
  <div class="nav">Навигация
  </div>
  <div class="wrp">Контент
    <div class="footer">Футер
    </div>
  </div>
</div>