Не получается прижать футер. Появляется полоса прокрутки

Question

Ломаю голову и никак не пойму в чем проблема.

Надо прижать footer к низу страницы. Для этого использовал способ с flex-box. При этом появляется полоса прокрутки. Если добавить свойство overflow: hidden, footer вовсе исчезает. Если вместо height: 100% использовать min-height: 100%, footer не прижимается к низу.

Структура страницы:

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: red;
}
.wraper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: green;
}
.footer {
  width: 100%;
  height: 100px;
  background-color: cyan;
}
.contacts_footer {
  float: left;
  background-color: blue;
}
.copyrights {
  float: right;
  background-color: brown;
}

<div class="header">
  <div class="container">
    <div class="header_top">
      <div class="contacts">
        <p>
          +380966579797
          <br> shock@gmail.com
        </p>
      </div>
      <div class="login">
        <a href="login"></a>
      </div>
      <div class="registration">
        <a href="reg"></a>
      </div>
    </div>
    <div class="header_middle">
      <div class="header_logo">

      </div>
      <div class="header_search">

      </div>
      <div class="header_basket">
      </div>
    </div>
    <div class="header_bottom">
      <div class="top_menu">

      </div>
    </div>
  </div>
</div>
<div class="wraper">

</div>
<div class="footer">
  <div class="contacts_footer">
    +380966579797
    <br> shock@gmail.com
  </div>
  <div class="copyrights">
    ©Comp 2018
  </div>
</div>

Answer 1

Все верно у тебя wraper занимает 100% экрана + footer занимает 100px 2 варианта выполнения

1) через calc - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения

https://jsfiddle.net/eyhcv9ok/1/

.header{
    height: 100px;
}
.wraper{
    display: flex;
    flex-direction: column;
    height: calc(100% - 200px);
}

.footer{
    width: 100%;
    height: 100px;
}

1) через позиционирование flex

https://jsfiddle.net/ybh6tav0/2/

body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.wraper{
    display: flex;
    flex-direction: column;
}
.footer{
    width: 100%;
}

Answer 2

body{
    height: 100%;
     display: flex;
    flex-direction: column;
    justify-content:space-between;
}
.wraper{
    width:100%;
}