Q&Aフッターがページごとにズレてしまいます
ここに質問の内容を詳しく書いてください。
Railsで簡易的なツイッターのようなアプリを作成してます。
その中で、views/layout/application.html.erbにヘッダーとフッターを設定しました。
該当のソースコード
ruby
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>SuggeAni</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 8 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 9 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 10 </head> 11 12 <body> 13 <div class="all-contents"> 14 <header class="header"> 15 <div class="header__title"> 16 <%= link_to image_tag("logo.png", class:"logo"), "/" %> 17 </div> 18 <div class="header__side"> 19 <div class="header__login"> 20 <%= "ログイン" %> 21 </div> 22 <div class="header__new"> 23 <%= link_to "投稿する", new_article_path %> 24 </div> 25 </div> 26 </header> 27 28 <%= yield %> 29 30 <footer> 31 <div class="foot"> 32 <%= "fooooooooooo!!!!" %> 33 </div> 34 <footer> 35 </div> 36 </body> 37</html>
このコードのフッター部分に対してcssを下記のように記述したところ、トップページではフッターは横100%（width:100%; ）で表示されるのですが、新規投稿ページでは左側に空白がありその隣にフッターが表示されます。（イメージとしては.foot に margin-left: 500px;があるようなかんじです)
css
1.all-contents{ 2 min-height: 100vh; 3 position: relative; 4 padding-bottom: 120px; 5} 6 7 8.foot { 9 width:100%; 10 height:30px; 11 color:#fff; 12 text-align:center; 13 background:#2e3333; 14 margin-top: 50px; 15 position: absolute; 16 bottom: 0; 17 }
試したこと
記述したcssを一つずつコメントアウトしてどこが問題なのか確かめてみたのですが、原因がわかりませんでした。
回答2件
0
自己解決
新規投稿ページのコードを見て行ったらdivタグが閉じられてなに箇所がありました…。おそらくそこが原因だったぽいです…。
投稿2021/01/29 01:58
総合スコア1
0
You should have element wraper <%= yield %>, and set following style:
Style
1min-height: calc(100vh - {height of .header}px)
Hope can help you.
投稿2021/01/28 09:51
総合スコア25
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。