画面サイズフリーでHTML&CSSフッターを固定したい

Question

前提・実現したいこと

HTML&CSSで作ったペラサイトのフッターを画面サイズが変わっても常に画面下に固定するようにしたい。

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

PC画面サイズだと画面下に固定されているが、画面サイズが変わっても移動しないため、結果的に画面が小さくなるとフッターが上がってきてしまう。

該当のソースコード

CodePenのページ
https://codepen.io/dev_milk/pen/vYmWYrw

テストページ
https://folio.awe.jp/

.wrapper{
    min-height: 100vh;
    position: relative;/*←相対位置*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

.footer {
  background-color: #2f5167;
  color: #fff;
  padding: 40px;
  width: 100%;
  position: absolute;/*←絶対位置*/
  bottom: 0; /*下に固定*/
}

<div id="wrapper">
<div class="footer">
       <div class="footer-logo">DEVMILK</div>
       <div class="footer-list">
         <ul>
           <li><a href="#">BLOG</a></li>
           <li><a href="#">TWITTER</a></li>
           <li><a href="#">INSTAGRAM</a></li>
           <li><a href="#">YOUTUBE</a></li>
       </ul>
       </div>
    </div>
</div>

試したこと

TechAcademyの「CSSでフッターをウィンドウ最下部に固定する方法【初心者向け】」を見ながらCSSを調整したり、
メディアクエリを付けてみたが、変化がなかった。

Answer 1

position: fixedにしてみてはいかがですか？

Comments

[退会済みユーザー]

Lhankor_Mhyさん
コメントありがとうございます！
position: fixed で解決しました！

メディアクエリのpositionも忘れずに変更したら解決しました！