Bootstrap4でフッターを最下部に配置できない

前提・実現したいこと

Laravel5.5を利用し、Bootstrap4でホームページを作成しています。
フッターを最下部に設置したいです。(常に画面に映る固定状態ではなく、
最下部までスクロールすると、最下部にフッターがあるという状態にしたいです。)

下記2つの問題が発生しています。
①コンテンツが少ない(スクロールなしで全コンテンツが見れる)場合
container-fluidが縦の長さフルサイズにならず、コンテンツの大きさに合わせた長さ
になり、フッターはcontainer-fluidとは関係なくwrapperの一番下にくる
(=フッターがコンテンツとかぶることもあれば、コンテンツから謎の空白(marginは一切設定していない)
を挟んで最下部のフッターに至ることもあります)
②コンテンツが多い(コンテンツをすべて見るにはスクロールが必要)場合
フッターが画面を開いた直後=スクロールする前の画面の最下部に固定され、コンテンツ
と完全に被ってしまう

発生している問題・エラーメッセージ

①container-fluidは、min-height:100%を指定しているのにも
関わらず、上位のwrapperの大きさではなくコンテンツの大きさに合わせて
長さが決まってしまうのはなぜでしょうか。
(そのような仕様でしょうか？)
色々なサイトを拝見させていただいたのですが、
そもそも各要素の縦の長さがどのように決まるかがわかりません。
子要素の長さが優先されるのか、親要素の長さが優先されるのか…

②画面の縦フルサイズのwrapper内にposition:absolute
でbottom:0としてフッターをおいたにもかかわらず、
最初の画面位置最下部に位置するのはなぜでしょうか。

ご教示頂けますと幸甚です。

宜しくお願い致します。

該当のソースコード

.wrapper {
  overflow: hidden;
  min-height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 130px;
  background-color:#022051;
	color: #fff;		
	text-align: center;
  line-height: 20px;
  font-size: 0.5rem;
}

.container-fluid {
  min-height: 100%;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

  <div class="wrapper">
    <div class="container-fluid">
      <div class="row">

        <!-- left sidebar -->
        <div class="d-none d-lg-block col-lg-2 no-padding">
          @include('common.sidebar')
        </div>

        <!-- contents -->
        <div class="col-md-12 col-lg-10 no-padding">
          <div class="container">
          </div>
        </div>

    　</div>
 　 </div>

  <!-- fotter -->
        <footer>
          @include('common.footer')
        </footer>
  </div>