Q&A
yield でセットされるviewのコードを追記してください。
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; }
あと、タイトルとやりたいことと起きてる現象が合致しません。
最下部設置はできてるのでは。
<%= yield %>の部分のerbをお見せ頂くことは可能でしょうか？
回答1件
0
自己解決
<%= render partial: 'shared/navigation_bar' %>
の部分に余分な</div>があったのが原因で<div class="wrapper">で全体を囲めていませんでした
大変初歩的なミスで申し訳ございませんでした
投稿2020/12/06 11:53
総合スコア25
あなたの回答
tips
プレビュー
