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

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

ただいまの
回答率

87.59%

フッター部分にBody要素がめり込んでしまう

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,310

score 20

つまずいている事

現在、Ruby on Railsにてオリジナルアプリ作成中で
ログイン後のホーム画面に投稿一覧を表示しようとしていますが
その内容がフッター部分にまでめり込んでしまい、うまくレイアウトができない状況です。

参考画像

イメージ説明

※ページ下部薄緑色の部分がリンクを記載しているフッター部分になります。
※投稿一覧は装飾画像の下から表示しております。

Viewのコード#1(全体のレイアウト指定/application.htmlerb)

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%= render 'layouts/default' %>
    <%= render 'layouts/shim' %>
  </head>

  <body>
    <div class="container">
      <%= render 'layouts/header' %>
      <% flash.each do |message_type, message| %>
        <div class="alert alert-<%= message_type %>"><%= message %></div>
      <% end %>
      <%= yield %>
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %>
    </div>
  </body>
</html>

Viewのコード#2(bodyタグのyield部分/home.html.erb)

<% provide(:title, "Home")%>
<div class="photo center"><%= image_tag 'band.jpg', :size => "700x400" %></div>
<% if logged_in? %>
  <%= render 'static_pages/user_logged_in' %>
<% else %>
  <%= render 'static_pages/user_not_logged_in' %>
<% end %>

Viewのコード#3(Homeのログイン時パーシャル_user.logged_in.html.erb)

<div class="col-md-9 col-sm-9 col-xs-12">
  <ol>
    <%= render @posts %>
  </ol>
</div>

Viewのコード#4(ログイン時パーシャルの@postsレンダリング部分/_post.html.erb)

<div class="col-md-9 col-sm-9 col-xs-12">
  <ol>
    <%= render @posts %>
  </ol>
</div>

Viewのコード#4(フッター部分パーシャル/_footer.html.erb)

<footer class="footer"  style="background-color: #c2e2e1;">
  <nav class="navbar">
    <ul>
      <li><%= link_to "About", about_path %></li>
      <li><%= link_to "Contact", "#" %></li>
      <li><%= link_to "Help", help_path %></li>
    </ul>
  </nav>
</footer>

CSSのコード(CSS全て記載のファイル/custom.scss)

@import "bootstrap-sprockets";
@import "bootstrap";

#不要な部分は省略

body{
  padding-top: 60px;
}

.center{
  text-align: center;
}


.content{
  display: block; 
}

// postのパーシャル

.post_li{
  margin-top: 10px;
  margin-top: 10px;
  border-top-color: #eee;
  border-top-style: solid;
  padding-top: 12px;
  ul{
    padding: 0;
    margin: 0;
    li{
      list-style: none;
    }
  }
}

// layouts

#logo{
    float: left;
    margin-right: 10px;
    font-size: 1.7em;
    color: white;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding-top: 9px;
    font-weight: bold;
    &:hover{
      color: white;
      text-decoration: none;
    }
}

header{
  li{
    color: white;
  }
}

footer{
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid;
  color: green;
  a{
    color: black;
    &:hover{
      color: green;
      text-decoration: none;
    }
  }
  ul{
    float: right;
    list-style: none;
    li{
      float: left;
      margin-left: 15px;
    }
  }
}

// Home

.photo{
  margin-bottom: 10px;
}

// ユーザー詳細ページ

.box-btn{
  text-align: center;
  background-color: #c2e2e1;
  padding: 20px 20px;
  border-top-color: #95cc4a;
  border-top-style: solid;
  border-right: 2px;
  border-right-color: white;
  border-right-style: solid;
  font-size: 20px;
  .text{
  color: black;
  }
}

Bootstrapバージョン:追記

gem 'bootstrap-will_paginate', '1.0.0'
gem 'bootstrap-sass',          '3.3.7'

HTMLコード(bodyタグ以下):追記

<body>
    <div class="container">
      <header class="navbar navbar-fixed-top navbar-dar" style="background-color: #50aba9;">
  <div class="container">
    <a id="logo" href="/">Band app</a>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="/">
          <i class="fa fa-home fa-lg"></i> Home
</a>        </li>
          <li>
            <a href="/posts/new">
            <i class="fa fa-comment fa-lg"></i> Post
</a>          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bars fa-lg fa-icon"></i>Menu<b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="/users">
                <i class="fa fa-users fa-lg"></i> Users
</a>              </li>
              <li>
                <a href="/users/105">
                <i class="fa fa-file fa-lg"></i> Profile
</a>              </li>
              <li>
                <a href="/users/105/edit">
                <i class="fa fa-edit fa-lg"></i> User-edit
</a>              </li>
              <li class="divider"></li>
              <li>
                <a rel="nofollow" data-method="delete" href="/logout">
                <i class="fa fa-door-open fa-lg"></i> Log out
</a>              </li>
            </ul>
          </li>
      </ul>
    </nav>
  </div>
</header>
      <div class="photo center"><img src="/assets/band-d33e818289f361d0ee163fbed62a878d7dc217b2262acb88201c800f0edbd7be.jpg" alt="Band" width="700" height="400"></div>
  <div class="col-md-9 col-sm-9 col-xs-12">
  <ol>
    <li class="post_li">
  <a href="/users/105"><img alt="yuna" class="gravatar" src="https://secure.gravatar.com/avatar/fdf0d98a4e37cc54f616e6cc4b86a287?s=50"></a>
  <span class="name">yuna</span><br>
  <a href="/posts/6"><span class="subject">ベース募集</span></a><br>
  <span class="created_at">about 2 hours ago</span>
</li><li class="post_li">
  <a href="/users/103"><img alt="mei" class="gravatar" src="https://secure.gravatar.com/avatar/48e07f84fe82db91722e8e3df274c0b3?s=50"></a>
  <span class="name">mei</span><br>
  <a href="/posts/5"><span class="subject">ワンオクのコピバン</span></a><br>
  <span class="created_at">2 days ago</span>
</li><li class="post_li">
  <a href="/users/103"><img alt="mei" class="gravatar" src="https://secure.gravatar.com/avatar/48e07f84fe82db91722e8e3df274c0b3?s=50"></a>
  <span class="name">mei</span><br>
  <a href="/posts/4"><span class="subject">オリジナルバンドのメンバー募集</span></a><br>
  <span class="created_at">2 days ago</span>
</li><li class="post_li">
  <a href="/users/104"><img alt="jojo" class="gravatar" src="https://secure.gravatar.com/avatar/7cfbff9fc777aaeff4c72047c7bca7c1?s=50"></a>
  <span class="name">jojo</span><br>
  <a href="/posts/3"><span class="subject">椎名林檎のコピバン</span></a><br>
  <span class="created_at">3 days ago</span>
</li><li class="post_li">
  <a href="/users/2"><img alt="Lucious Reynolds" class="gravatar" src="https://secure.gravatar.com/avatar/402772438d73ad34973125a486cacf58?s=50"></a>
  <span class="name">Lucious Reynolds</span><br>
  <a href="/posts/2"><span class="subject">男性ボーカル求む</span></a><br>
  <span class="created_at">8 days ago</span>
</li><li class="post_li">
  <a href="/users/2"><img alt="Lucious Reynolds" class="gravatar" src="https://secure.gravatar.com/avatar/402772438d73ad34973125a486cacf58?s=50"></a>
  <span class="name">Lucious Reynolds</span><br>
  <a href="/posts/1"><span class="subject">ギターを探しています!!</span></a><br>
  <span class="created_at">9 days ago</span>
</li>
  </ol>
</div>

      <footer class="footer" style="background-color: #c2e2e1;">
  <nav class="navbar">
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="/help">Help</a></li>
    </ul>
  </nav>
</footer>
      <pre class="debug_dump">--- !ruby/object:ActionController::Parameters
parameters: !ruby/hash:ActiveSupport::HashWithIndifferentAccess
  controller: static_pages
  action: home
permitted: false
</pre>
    </div>


</body>

問題に対する対処

footer部分のnavタグをさらにdivタグで囲む
同じ部分にcssでdiplay: block;を適用してみるなど色々しましたが一向に改善されない状況です。

お願い

一人では解決が難しいため
どなたかアドバイスをよろしくお願いします。。

以上です。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • cerfweb

    2019/02/20 01:08

    Bootstrapなども使用されていますか。もし使われている場合はバージョンもお知らせください。
    また、実際に表示された状態のhtmlもご提示いただいた方が解決が早いと思います。

    キャンセル

  • iyore888

    2019/02/20 01:25

    コメント頂き有難うございます。
    ご指摘いただいた点について項目を新しく追加し追記させて頂きました。

    キャンセル

回答 2

check解決した方法

0

ログイン時のパーシャルのdivタグにBootstrapを指定していたがそちらを削除したところレイアウトが正常なものに直った。
詳細な原因は不明でした。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

clearしてないからでは。

【CSS: フロートの解除にはクリアフィックスが便利 - すたらブログ】
http://sutara79.hatenablog.com/entry/2016/09/26/130238


フロート以外にも色々配置方法はあるので、それらも検討してみては。

【よこ並びのCSS。】
http://lopan.jp/layout/

【段組みのCSS。】
https://lopan.jp/layout2/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/20 01:28

    追記に対して:Bootstrap使っているならレイアウトにフロート使うのではなくBootstrapにあるクラスである程度組んだほうが崩れないですよ。

    キャンセル

  • 2019/02/20 01:42

    コメント有難うございます!
    初回に頂いたアドバイスも含めて参考にして試してみたいと思います。
    取り急ぎお礼まで。

    キャンセル

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る