質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

3010閲覧

rails: footerを常に最下部に表示したい

rikuou

総合スコア25

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/12/02 09:29

railsを用いてwebサービスを開発しています

下記サイトを参考にしてfooterを最下部に表示したいのですが、下図のようにコンテンツ内容の上に空白ができてしまいます。
https://qiita.com/nozomi716/items/2b09d5bce3d08d1c41f9

コンテンツの上に空白

コンテンツの上に空白
コンテンツ

コンテンツ

原因がわかりません。どなたかご教授お願いいたします。

application.html.erb <!DOCTYPE html> <html> <head> <title>ShinshuFiber</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <div class="wrapper"> <%= render partial: 'shared/navigation_bar' %> <%= flash[:notice] %> <%= yield %> <footer>    <ul class="footer-menu"> <li><%= link_to "利用規約", home_terms_path %> |</li> <li><%= link_to "プライバシーポリシー", home_privacy_path %> |</li> <li>お問い合わせ |</li> <li><%=link_to "開発者について", home_myself_path %></li> </ul> <p>© All rights reserved by webcampnavi.</p> </footer> </div> </body> </html>
application.scss @import '~bootstrap/scss/bootstrap'; @import '@fortawesome/fontawesome-free'; body { ::-webkit-scrollbar { display: none; } -ms-overflow-style: none; } .wrapper { display: flex; flex-direction: column; min-height: 100vh; } footer{ margin-top: auto; background-color: #174a5c; color: white; text-align: center; } ul.footer-menu li { display: inline; } a { &:hover, &:focus { text-decoration: none; } } .chat-room { height: 70vh; border: solid 1px #eeeeee; border-bottom: transparent; #messages { height: 100%; overflow-y: scroll; padding-bottom: 200px; padding-top: 20px; } .message { min-height: 59px; .content-container { margin-left: 12px; display: inline-block; .content { background-color: #eeeeee; padding: 8px 16px; border-radius: 20px; } .author { font-size: 0.8rem; color: #777777; margin-left: 10px; } } &.me { margin-right: 12px; .content-container { float: right; .content { background-color: #007bff; color: white; } } } } } .chat-box{ width: 100%; background-color: white; input[type=text] { height: 45px; font-size: 18px; padding: 8px; } .btn { height: 45px; } } .room-container { .room-link { .room-card { &:hover { background-color:#f8f8f8; } } .room-user { color: black; } .room-message{ color: #666666; } } } .room-card { &:hover { background-color:#f8f8f8; } } .room-user { color: black; } .room-message{ color: #666666; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/12/02 13:12

yield でセットされるviewのコードを追記してください。
m.ts10806

2020/12/02 13:12

あと、タイトルとやりたいことと起きてる現象が合致しません。 最下部設置はできてるのでは。
tomtomtomtom

2020/12/03 01:20

<%= yield %>の部分のerbをお見せ頂くことは可能でしょうか?
guest

回答1

0

自己解決

<%= render partial: 'shared/navigation_bar' %>

の部分に余分な</div>があったのが原因で<div class="wrapper">で全体を囲めていませんでした

大変初歩的なミスで申し訳ございませんでした

投稿2020/12/06 11:53

rikuou

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問