cssで設定したフッターの位置がズレてしまいます

フッターがページごとにズレてしまいます

ここに質問の内容を詳しく書いてください。
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件

自己解決

新規投稿ページのコードを見て行ったらdivタグが閉じられてなに箇所がありました…。おそらくそこが原因だったぽいです…。

投稿2021/01/29 01:58

WqiMf

総合スコア1

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

VuDinhLoan

総合スコア25

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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