コンテンツ量が少ない時はフッターをウインドウ最下部に固定したい

#前提・実現したいこと

railsでビューを作成しています。
現段階では、Aのページはコンテンツ量が多めで、問題なくスクロール下にフッターが固定されています。
Bのページではコンテンツ量が少なめですが、Aのページと同じく無駄にスクロール下にフッターが固定されています。

希望は、コンテンツ量が少ない場合は、スクロールせずにウインドウ最下部にフッターを固定したい内容となります。

#該当のソースコード

html
1<body>
2    <header class="header">
3      <%= render 'layouts/notifications' %>
4      <div class="header__bar">
5        <h1 class="header__bar__logo"><a href="/">Mymemo</a></h1>
6
7        <% if user_signed_in? %>
8          <div class="user_nav">
9              <ul class="user__info">
10                <li>
11                  <span><%= current_user.nickname %></span>
12                  <%= link_to  "記録する", "/memos/new", class: "posts" %>
13                  <%= link_to "みんなの記録", "/users/#{current_user.id}", class: "post" %>
14                  <%= link_to "ログアウト", destroy_user_session_path, class: "post", method: :delete %>
15                </li>
16              </ul>
17          </div>
18        <% else %>
19          <div class="user_nav">
20            <%= link_to "ログイン", new_user_session_path, class: 'post' %>
21            <%= link_to "新規登録", new_user_registration_path, class: 'post' %>
22          </div>
23        <% end %>
24        
25      </div>
26    </header>
27    <%= yield %>
28    <footer>
29      <p>
30        Copyright Mymemo 2020.
31      </p>
32    </footer>
33  </body>

sass
1html{
2  min-height: 100%;
3  position: relative;
4}
5body {
6  margin-bottom: 60px;
7}
8  
9.header{
10  background-color: rgb(6, 8, 6);
11  height: 70px;
12}
13.maincontent{
14  background-color: #454545;
15  min-height: 100vh;
16  .contents{
17    padding: 80px 100px;
18    display: flex;
19    flex-wrap: wrap;
20    background-color: #454545;
21    }
22}
23footer{
24  bottom: 0;
25  position: absolute;
26 
27  background-color:rgb(10, 10, 10) ;
28  height: 60px;
29  line-height: 60px;
30  width:100vw;
31}

yield
1<div class="maincontent">
2  <%= form_with(url: search_memos_path, local: true, method: :get, class: "search") do |form| %>
3    <%= form.text_field :keyword, placeholder: " \uf002 seach", class: "fa" %>
4    <%= form.submit "検索", class: "search-btn" %>
5  <% end %>
6    <div class="contents">
7      <% @memos.each do |memo| %>
8        <%= render partial: "memo", locals: { memo: memo } %>
9
10      <% end %>
11    </div>
12</div>

#試したこと
sassの.maincontentにmin-height: 100vh;を入れない状態では、
Bページのフッターがウインドウ最下部に固定されているものの、
コンテンツ量が少ないためフッター上に空白が出来てしまいます。（リセットcss済み）
.maincontentでheightの％、vhを試してみましたが、変化がありません。
ご教示いただけますと幸いです。

宜しくお願いします。

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

回答1件

ベストアンサー

こちらでいかがでしょうか?

CSS
1html {
2  margin: 0; /* リセットCSSをしているとのことなので不要かもしれません */
3  /* min-height: 100%; */
4  min-height: 100vh;
5  position: relative;
6}
7body {
8  margin: 0; /* リセットCSSをしているとのことなので不要かもしれません */
9  /*margin-bottom: 60px;*/
10  min-height: 100vh;
11  display: flex;
12  flex-direction: column;
13}
14
15.header {
16  background-color: rgb(6, 8, 6);
17  height: 70px;
18}
19.maincontent {
20  background-color: #454545;
21  /* min-height: 100vh; */
22
23  .maincontent .contents {
24    padding: 80px 100px;
25    display: flex;
26    flex-wrap: wrap;
27    background-color: #454545;
28  }
29}
30footer {
31  margin-top: auto;
32  bottom: 0;
33  /* position: absolute; */
34  background-color:rgb(10, 10, 10);
35  height: 60px;
36  /* line-height: 60px; */ /* 下方向に余白が出ているようだったのでコメントアウト */
37  width:100vw;
38}

もしくは以下のようなアプローチもあるかもしれません。

CSS
1.maincontent {
2  min-height: calc(100vh - 60px);
3}

投稿2020/04/07 12:03

編集2020/04/07 12:05

new1ro

総合スコア4528

kokosi1062

2020/04/09 06:07

回答いただきありがとうございます。おかげで、下記にて解決できました。 .maincontent { min-height: calc(100vh - 60px); } ただ、フッター上に空白がまだあったので、もしやフッター分とヘッター文も合わせた min-height: calc(100vh - 130px);にて正しく表示されました。

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