はじめに
こんにちは、エンジニア転職を目指してRailsを学習中のJintaと申します。
現在、ポートフォリオを作成中で、CSSのフレームワークにTailwindを使用しています。
そこで、コンテンツ量の少ないページ（ログインなど）を作成していた際に、フッターが下部に固定されず、フッターの下に余白ができて違和感を感じていました。
どういう状況か？
今回はログイン画面で説明します。
修正する前のビューのコードとブラウザでの表示は以下のような状況です。
application.html.erb
<html>
.
.
<body>
<%= render 'shared/header' %>
<%= render 'shared/flash' %>
<div class="bg-yellow-50">
<%= yield %>
</div>
<%= render 'shared/footer' %>
</body>
</html>
sessions/new.html.erb
<div class="container mx-auto">
<div class="px-5 border-opacity-50">
<div class="grid place-items-center">
<h2 class="place-items-centeer my-6 text-2xl text-bold">ログイン</h2>
</div>
<div class="grid place-items-center">
<%= form_with model: resource, url: session_path(resource_name), class: 'w-full px-5 md:w-3/5 md:px-0', local: true do |f| %>
<div class="form-control">
<%= f.label :email, class: 'label-text text-xl' %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'input input-warning border-gray-800 border-opacity-50 bg-yellow-50', placeholder: 'sample@samplecom' %>
</div>
<div class="form-control mt-5">
<%= f.label :password, class: 'text-label text-xl' %>
<%= f.password_field :password, autocomplete: "current-password", class: 'input input-warning border-gray-800 border-opacity-50 bg-yellow-50', placeholder: 'パスワード（6文字以上）' %>
</div>
<% if devise_mapping.rememberable? %>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end %>
<div class="actions">
<%= f.submit "ログイン", class: 'btn btn-wide btn-neutral w-full mt-10' %>
</div>
<% end %>
</div>
<div class="grid place-items-center mt-10">
<%= render "users/shared/links" %>
</div>
</div>
</div>
コンテンツが少ないので、フッターの下に余白ができています。
かなり違和感を覚えますよね。
解決方法
application.html.erb
<html>
.
.
<body class="flex flex-col min-h-screen">
<%= render 'shared/header' %>
<%= render 'shared/flash' %>
<div class="flex-grow bg-yellow-50">
<%= yield %>
</div>
<%= render 'shared/footer' %>
</body>
</html>
上記のように、bodyに「class="flex flex-col min-h-screen"」、コンテンツ部分に「div class="flex"」を適用することで、以下のとおり解決しました。
解説としては、
・flex flex-colで、ページのコンテンツ（ヘッダー、コンテンツ、フッター）を縦方向に配置
・min-h-screenで、ページの最小の高さを画面の高さ（ビューポートの高さ）に合わせる。
・flex-growはデフォルト値が0で、余分なスペースは受け取らないみたいなので、コンテンツ量に合わせてサイズ調整される（コンテンツ量が少ない場合は、フッターが画面の下部に固定される形）。
最後に
これまでCSSに触れる機会があまりなかったので、勉強になりました。
ポートフォリオ作成を始めてまだまだ序盤ですが、作成の中で発見したことは、記事にして発信していきたいと思います！