css で　コンテンツがないときにフッターが浮いてしまうのを防ぎたい

###　やりたいこと
Laravelでbootstrapを使って開発をしています。
マイページに、お気に入りなどを表示しているのですが、コンテンツがないときにフッターが浮いてしまうのを防ぎたいです。

キャプチャの画像が黄色くてすみません・・・
▼コンテンツがあるとき
https://gyazo.com/ad595ee7b58f77b19cbed22a82c96700

▼コンテンツがないとき。フッターが浮いてしまうのを画面の下に出したい
https://gyazo.com/0edbde79451e83b31a4d502cf0be1f04

###試したこと
①
bootstrapのcssを活用して、footerにfixed-bottomクラスを追加しましたが、
このようにいつもフッターが画面下に出てしまうので、これはやめたいです。
https://gyazo.com/116f2fa048085e5e5a2ece82fc99a68b

②こちらのページを参考にしました
https://techacademy.jp/magazine/19410

id wrapperをhtmlのbody全体になるように追加（app.blade.php）

    <body>
    <div id="wrapper">
        
        @include('commons.navbar')
 
            @include('commons.error_messages')
            @yield('mainimage')
        
        <div class="container">
            @yield('content')
        </div>
 
            @include('commons.footer')
 
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
    </div>
    </body>

cssに以下追加

footer {
    background-color: #d4e5ce;
    height: 50px;
    
    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
  
}


#wrapper {
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 50px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

今回はこのように、フッターが左側に偏ってしまいました・・・

https://gyazo.com/2b10313951cc013fee29f164a2f20957

ただ、コンテンツがなくても画面の下にフッターが来ているので、
https://gyazo.com/1540a213141792283c16821bd17053b6
これで画面いっぱいにフッターが広がればやりたいことが実現できたことになります。

ディベロッパーツールで見たhtml部分です
https://gyazo.com/191442f0fc58967d948ff2780e9b74a6

どうしたら、コンテンツがなくても画面の下にフッターが配置できるでしょうか。
試したことの②でフッターが画面いっぱいに広がるようにするにはどうしたらよいでしょうか。
アドバイスお願いいたします。。。

kei344

2020/02/20 15:10

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

mikeko0901

2020/02/21 03:19

画像も貼れるのですね！次回からそのようにさせていただきます。ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

画面いっぱいにfooterを広げたい場合

css
1footer {
2    background-color: #d4e5ce;
3    width: 100%; /*これを追記*/
4    height: 50px;
5    position: absolute;/*←絶対位置*/
6    bottom: 0; /*下に固定*/
7
8}