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

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

ただいまの
回答率

87.60%

Bootstrap4にてfooterとbodyの間に不自然な間が開く

解決済

回答 1

投稿 編集

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

score 47

お世話になっております。
当方Laravel5.5・Bootstrap4を使用してWebSiteを構築しております、
環境はmac OS Mojave10.14.2
ブラウザはGoogle Chrome バージョン: 71.0.3578.98になります。

困っていること

sidebarをfooterの位置まで伸ばしたいのですが、
bodyの部分がfooterの位置まで伸びず、
結果bodyの下位にあるsidebarが下まで伸びません。

現状

※見やすいようにfontのcssは省いています

  • 構成最上位
    body
body {
    padding-top: 71px;
    margin: 0px;
    height: 100%;
    line-height: 0.7rem;
}
  • 2位 
    navbar(ヘッダ) wrapper

wrapper

wrapper {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}
  • 3位 (wrapperの下)
    containerfluid footer(この下はtextのみでheightやmarginなし)

containerfluid

container-fluid {
    min-height: 100%;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 130px;
    margin-right: auto;
    margin-left: auto;
}

footer

.footer {
    position: absolute;
    display: table;
    bottom: 0;
    width: 100%;
    height: 130px;
}
  • 4位 (containerfluidの下)
    row
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  • 5位 
    左:class="d-none d-lg-block col-lg-2 no-padding"
    右:class="col-md-12 col-lg-10"
    全てbootstrap標準通りです。

container

    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  • 6位 
    左:class="sidebar border"(この下はメニューのみ=左側のbody最下位)
    右:class="container"

sidebar border

    width: 100%;
    height: 100%;
    bottom: 0;


container

    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  • 7位 (containerの下)
    rowが3行で、
    一番下のrowがclass="col-lg-12"
    標準通りです。

  • 8位
    class="advertisement mx-auto  w-15"

argin-top: 4rem;
    margin-bottom: 2rem;

試したこと

  • 上位・下位の要素を全てheight100%、margin0、padding0としても
    不自然な隙間が開きます。
  • container-fluidのpaddingを0とし、
    footerの高さをheight100%に変更するなど
    しましたが、全く動きはありませんでした。
  • chromeの検証を使用して、隙間のところにカーソルを
    当てても、何も要素が表示されません。
    (何かのpaddingやmarginではなく、かつ要素があるわけでもなさ
    そうです)

宜しくお願い致します。

追記

該当コードのレイアウトを追記します。
(コンポーネントまでは様々あるため追記できませんが、
コンポーネントの縦の長さが短い場合は問題が発生します。
長い場合はbodyがfooterにつくため発生しません。)

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--favicon-->
<link rel="shortcut icon" href="{{ asset('/images/favicon.ico') }}">

<!--style source-->
//省略

  <!-- hedder -->
  @include('common.header_component')

</head>

<body>
  <div class="wrapper">
    <div class="container-fluid">
      <div class="row">

        <!-- left sidebar -->
        <div class="d-none d-lg-block col-lg-2 no-padding">
          @include('common.sidebar_component')
        </div>

        <!-- contents -->
        <div class="col-md-12 col-lg-10">
          <div class="container">

            <div class="row">
             <div class="col-lg-12">
               <div class="title_frame">
                @yield('title_content')
               </div>
             </div>
            </div>

            <div class="row">
              <div class="col-lg-12">
                <!-- content -->
                @yield('content')
              </div>
            </div>

            <!-- button area -->
              <div class="row">

                  @yield('button')

              </div>

              <div class="row">
                <div class="col-lg-12 both-side-padding">
                  @component('common.advertise_component')
                  @endcomponent
                </div>
              </div>
          </div>
        </div>

    </div>
  </div>

  @include('common.footer_component')


  </div>
</body>

</html>

footer

<div class="footer">
  <div class="text">
        <a href="show_AAAAA">AAAAA</a>&nbsp;&nbsp;&nbsp;
        <!--    <a href="AAAAA.php">AAAAA</a>&nbsp;&nbsp;&nbsp; -->
        <a href="show_AAAAA">AAAAA</a><br />
        <a href="show_AAAAA">AAAAA</a><br />
        <a href="show_AAAA">AAAAA</a>&nbsp;&nbsp;&nbsp;
        <a href="AAAAA">AAAAA</a><br />
      <div class="pr">Copyright&copy; <a href="index.php">AAAAA</a> All Rights Reserved.</div>
  <div>
</div>

sidebar

<div class="sidebar border">
 <nav class="sidebar-menu" role="navigation">
  <ul>
   <li class="bg-deepblue">AAAAAA</li>
     <div class="d-block my-1">
       <div class="dropright_top">
       <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
       <ul class="dropdown-menu multi-level">
         <li><a href="#">Default</a></li>
         <li class="dropdown-submenu">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li><a href="#">sub menu1</a></li>
           <li class="dropdown-submenu">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
           <ul class="dropdown-menu">
             <li class="dropdown-submenu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
             <ul class="dropdown-menu">
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
             </ul>
             </li>
           </ul>
           </li>
         </ul>
         </li>
        </ul>
        </div>
      </div>
   <li class="bg-deepblue">AAAAAA</li>
     <div class="d-block my-1">
       <div class="dropright_top">
       <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
       <ul class="dropdown-menu multi-level">
         <li><a href="#">Default</a></li>
         <li class="dropdown-submenu">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu">
           <li><a href="#">sub menu1</a></li>
           <li class="dropdown-submenu">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a>
           <ul class="dropdown-menu">
             <li class="dropdown-submenu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a>
             <ul class="dropdown-menu">
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
               <li><a href="#">sub menu3</a></li>
             </ul>
             </li>
           </ul>
           </li>
         </ul>
         </li>
        </ul>
        </div>
      </div>
   <li class="bg-deepblue">AAAAAA</li>
  </ul>
</nav>
</div>


title content・content

@extends('common.layout_common')

 @section('title_content')
   <div class="title_letter d-inline">AAAA</div>
   <div class="d-inline search_result">
    @if(count($AAAAdata) > 0)
   ( {{$AAAAdata->count()}} /
   {{$AAAAdata->total()}} 件を表示中 )
    @endif
   </div>
 @endsection

 @section('content')
 <div class="row">
   <div class="col-lg-12">

   @component('common.middle_title_component')
    @slot('title')
      AAAA
    @endslot
   @endcomponent

   @if(count($AAAAdata) > 0)

   @component('AAAA.AAAA_list_component')
   @endcomponent

   @else
    <div class="text-center my-5">AAAA</div>
   @endif

</div>
</div>

@endsection

AAAA_list_component

  @foreach ($AAAdata as $AAA)
      @if ($loop->iteration % 4 == 1)
      <div class="row">
      @endif

      <div class="col-md-3 col-sm-6 mb-2">
        <a class="link" href="{{ route('AAAAA') }}">
        <div class="card">
          <img class="card-img-top" src='{{ asset($AAA) }}' alt="AAA">
          <div class="card-body">
            <div class="card-title">
            </div>
          </div>
          <div class="card-footer">
            <i class="far fa-heart"></i><span style="margin-right:0.5em;"></span>
            <i class="far fa-comment"></i>
          </div>
        </div>
      </div>

      @if ($loop->iteration % 4 == 0 || $loop->last)
      </div>
      @endif

  @endforeach

common.advertise_component

  <div class="advertisement mx-auto  w-15">
    <img src="{{ asset('AAAA') }}" class="img-fluid" alt="banner1">
  </div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • s8_chu

    2019/03/30 20:55

    質問者さんの問題が再現するコードを質問文に追記していただけませんか?

    キャンセル

  • gobindar

    2019/03/30 21:06

    s8_chu様
    修正依頼ありがとうございます。
    只今追記いたしましたのでご確認下さると幸甚です。

    キャンセル

回答 1

checkベストアンサー

+3

以下のようにすることで質問者さんの実現したいことは行えると思いますが、いかがでしょうか?(動作確認用リンク)

<div class="wrapper d-flex">
  <div class="container-fluid d-flex">
    <div class="row">

      <!-- left sidebar -->
      <div class="d-none d-lg-block col-lg-2 no-padding">
        @include('common.sidebar_component')
      </div>

      <!-- contents -->
      <div class="col-md-12 col-lg-10">
        <div class="container">

          <div class="row">
            <div class="col-lg-12">
              <div class="title_frame">
                @yield('title_content')
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-12">
              <!-- content -->
              @yield('content')
            </div>
          </div>

          <!-- button area -->
          <div class="row">

            @yield('button')

          </div>

          <!-- advertisement -->
          <div class="row">
            <div class="col-lg-12 both-side-padding">
              @component('common.advertise_component') @endcomponent
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="footer">@include('common.footer_component')</div>

</div>
body {
  line-height: 0.7rem;
  height: 100vh;
  margin: 0;
  padding-top: 71px;
  background: #ffa;
}

.wrapper {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding-bottom: 130px;
}

.row {
  background: #faf;
  flex: 1;
}

.footer {
  position: absolute;
  bottom: 0;
  display: table;
  width: 100%;
  height: 130px;
  background: #faa;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/30 23:55

    解決されたようで良かったです。

    キャンセル

  • 2019/03/31 00:11

    すいません、
    後出しで申し訳ないのですが、
    こちら、footerの問題は解決したものの、
    table-responsiveが動かなく
    (overflow-x: auto;が効かなく)なってしまいました。
    横スクロールですが、
    先程変更したのは縦幅のみと考えておりました。
    もし原因がすぐにおわかりになるようであれば、
    大変恐縮なのですがご教示頂けないでしょうか…?

    キャンセル

  • 2019/03/31 00:13

    ちなみにテーブルはこのような形です。

    <div class="table-responsive-xl">
    <table class="table table-bordered tablefix" >
    <tr>
    <th style="width:20px;">IDa</th>
    <th style="width:20px;">IDb</th>
    <th style="width:20px;">IDc</th>
    </tr>
    <tr>
    <td style="width:25px;">{{ $data['a'] }}</td>
    <td style="width:25px;">{{ $data['b'] }}</td>
    <td style="width:25px;">{{ $data['c'] }}</td>
    </td>
    </tr>

    </table>
    </div>

    キャンセル

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

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

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