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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

645閲覧

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

gobindar

総合スコア51

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Blade

Bladeとは、 PHPフレームワークのLaravelで使用することができるテンプレートエンジンです。テンプレートの継承とエスケープ機能を提供します。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2019/03/30 10:57

編集2019/03/30 14:09

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

困っていること

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

現状

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

  • 構成最上位

body

php

1body { 2 padding-top: 71px; 3 margin: 0px; 4 height: 100%; 5 line-height: 0.7rem; 6}
  • 2位

navbar(ヘッダ) wrapper

wrapper

php

1wrapper { 2 position: relative; 3 overflow: hidden; 4 min-height: 100%; 5}
  • 3位 (wrapperの下)

containerfluid footer(この下はtextのみでheightやmarginなし)

containerfluid

php

1container-fluid { 2 min-height: 100%; 3 width: 100%; 4 padding-right: 15px; 5 padding-left: 15px; 6 padding-bottom: 130px; 7 margin-right: auto; 8 margin-left: auto; 9}

footer

php

1.footer { 2 position: absolute; 3 display: table; 4 bottom: 0; 5 width: 100%; 6 height: 130px; 7}
  • 4位 (containerfluidの下)

row

php

1.row { 2 display: flex; 3 flex-wrap: wrap; 4 margin-right: -15px; 5 margin-left: -15px;
  • 5位

左:class="d-none d-lg-block col-lg-2 no-padding"
右:class="col-md-12 col-lg-10"
全てbootstrap標準通りです。

container

php

1 width: 100%; 2 padding-right: 15px; 3 padding-left: 15px; 4 margin-right: auto; 5 margin-left: auto;
  • 6位

左:class="sidebar border"(この下はメニューのみ=左側のbody最下位)
右:class="container"

sidebar border

php

1 width: 100%; 2 height: 100%; 3 bottom: 0;

container

php

1 width: 100%; 2 padding-right: 15px; 3 padding-left: 15px; 4 margin-right: auto; 5 margin-left: auto;
  • 7位 (containerの下)

rowが3行で、
一番下のrowがclass="col-lg-12"
標準通りです。

  • 8位

class="advertisement mx-auto w-15"

php

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

試したこと

  • 上位・下位の要素を全てheight100%、margin0、padding0としても

不自然な隙間が開きます。

  • container-fluidのpaddingを0とし、

footerの高さをheight100%に変更するなど
しましたが、全く動きはありませんでした。

  • chromeの検証を使用して、隙間のところにカーソルを

当てても、何も要素が表示されません。
(何かのpaddingやmarginではなく、かつ要素があるわけでもなさ
そうです)

宜しくお願い致します。

追記

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

php

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5<meta charset="utf-8"> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<meta name="viewport" content="width=device-width, initial-scale=1"> 8 9<!--favicon--> 10<link rel="shortcut icon" href="{{ asset('/images/favicon.ico') }}"> 11 12<!--style source--> 13//省略 14 15 <!-- hedder --> 16 @include('common.header_component') 17 18</head> 19 20<body> 21 <div class="wrapper"> 22 <div class="container-fluid"> 23 <div class="row"> 24 25 <!-- left sidebar --> 26 <div class="d-none d-lg-block col-lg-2 no-padding"> 27 @include('common.sidebar_component') 28 </div> 29 30 <!-- contents --> 31 <div class="col-md-12 col-lg-10"> 32 <div class="container"> 33 34 <div class="row"> 35 <div class="col-lg-12"> 36 <div class="title_frame"> 37 @yield('title_content') 38 </div> 39 </div> 40 </div> 41 42 <div class="row"> 43 <div class="col-lg-12"> 44 <!-- content --> 45 @yield('content') 46 </div> 47 </div> 48 49 <!-- button area --> 50 <div class="row"> 51 52 @yield('button') 53 54 </div> 55 56 <div class="row"> 57 <div class="col-lg-12 both-side-padding"> 58 @component('common.advertise_component') 59 @endcomponent 60 </div> 61 </div> 62 </div> 63 </div> 64 65 </div> 66 </div> 67 68 @include('common.footer_component') 69 70 71 </div> 72</body> 73 74</html>

footer

php

1<div class="footer"> 2 <div class="text"> 3 <a href="show_AAAAA">AAAAA</a>&nbsp;&nbsp;&nbsp; 4 <!-- <a href="AAAAA.php">AAAAA</a>&nbsp;&nbsp;&nbsp; --> 5 <a href="show_AAAAA">AAAAA</a><br /> 6 <a href="show_AAAAA">AAAAA</a><br /> 7 <a href="show_AAAA">AAAAA</a>&nbsp;&nbsp;&nbsp; 8 <a href="AAAAA">AAAAA</a><br /> 9 <div class="pr">Copyright&copy; <a href="index.php">AAAAA</a> All Rights Reserved.</div> 10 <div> 11</div> 12

sidebar

php

1<div class="sidebar border"> 2 <nav class="sidebar-menu" role="navigation"> 3 <ul> 4 <li class="bg-deepblue">AAAAAA</li> 5 <div class="d-block my-1"> 6 <div class="dropright_top"> 7 <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 8 <ul class="dropdown-menu multi-level"> 9 <li><a href="#">Default</a></li> 10 <li class="dropdown-submenu"> 11 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 12 <ul class="dropdown-menu"> 13 <li><a href="#">sub menu1</a></li> 14 <li class="dropdown-submenu"> 15 <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> 16 <ul class="dropdown-menu"> 17 <li class="dropdown-submenu"> 18 <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> 19 <ul class="dropdown-menu"> 20 <li><a href="#">sub menu3</a></li> 21 <li><a href="#">sub menu3</a></li> 22 <li><a href="#">sub menu3</a></li> 23 <li><a href="#">sub menu3</a></li> 24 <li><a href="#">sub menu3</a></li> 25 <li><a href="#">sub menu3</a></li> 26 </ul> 27 </li> 28 </ul> 29 </li> 30 </ul> 31 </li> 32 </ul> 33 </div> 34 </div> 35 <li class="bg-deepblue">AAAAAA</li> 36 <div class="d-block my-1"> 37 <div class="dropright_top"> 38 <a href="#" class="dropright-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> 39 <ul class="dropdown-menu multi-level"> 40 <li><a href="#">Default</a></li> 41 <li class="dropdown-submenu"> 42 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 43 <ul class="dropdown-menu"> 44 <li><a href="#">sub menu1</a></li> 45 <li class="dropdown-submenu"> 46 <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> 47 <ul class="dropdown-menu"> 48 <li class="dropdown-submenu"> 49 <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> 50 <ul class="dropdown-menu"> 51 <li><a href="#">sub menu3</a></li> 52 <li><a href="#">sub menu3</a></li> 53 <li><a href="#">sub menu3</a></li> 54 </ul> 55 </li> 56 </ul> 57 </li> 58 </ul> 59 </li> 60 </ul> 61 </div> 62 </div> 63 <li class="bg-deepblue">AAAAAA</li> 64 </ul> 65</nav> 66</div>

title content・content

php

1@extends('common.layout_common') 2 3 @section('title_content') 4 <div class="title_letter d-inline">AAAA</div> 5 <div class="d-inline search_result"> 6 @if(count($AAAAdata) > 0) 7 ( {{$AAAAdata->count()}} / 8 {{$AAAAdata->total()}} 件を表示中 ) 9 @endif 10 </div> 11 @endsection 12 13 @section('content') 14 <div class="row"> 15 <div class="col-lg-12"> 16 17 @component('common.middle_title_component') 18 @slot('title') 19 AAAA 20 @endslot 21 @endcomponent 22 23 @if(count($AAAAdata) > 0) 24 25 @component('AAAA.AAAA_list_component') 26 @endcomponent 27 28 @else 29 <div class="text-center my-5">AAAA</div> 30 @endif 31 32</div> 33</div> 34 35@endsection

AAAA_list_component

php

1 @foreach ($AAAdata as $AAA) 2 @if ($loop->iteration % 4 == 1) 3 <div class="row"> 4 @endif 5 6 <div class="col-md-3 col-sm-6 mb-2"> 7 <a class="link" href="{{ route('AAAAA') }}"> 8 <div class="card"> 9 <img class="card-img-top" src='{{ asset($AAA) }}' alt="AAA"> 10 <div class="card-body"> 11 <div class="card-title"> 12 </div> 13 </div> 14 <div class="card-footer"> 15 <i class="far fa-heart"></i><span style="margin-right:0.5em;"></span> 16 <i class="far fa-comment"></i> 17 </div> 18 </div> 19 </div> 20 21 @if ($loop->iteration % 4 == 0 || $loop->last) 22 </div> 23 @endif 24 25 @endforeach 26

common.advertise_component

php

1 <div class="advertisement mx-auto w-15"> 2 <img src="{{ asset('AAAA') }}" class="img-fluid" alt="banner1"> 3 </div>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2019/03/30 11:55

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

2019/03/30 12:06

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

回答1

0

ベストアンサー

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

HTML

1<div class="wrapper d-flex"> 2 <div class="container-fluid d-flex"> 3 <div class="row"> 4 5 <!-- left sidebar --> 6 <div class="d-none d-lg-block col-lg-2 no-padding"> 7 @include('common.sidebar_component') 8 </div> 9 10 <!-- contents --> 11 <div class="col-md-12 col-lg-10"> 12 <div class="container"> 13 14 <div class="row"> 15 <div class="col-lg-12"> 16 <div class="title_frame"> 17 @yield('title_content') 18 </div> 19 </div> 20 </div> 21 22 <div class="row"> 23 <div class="col-lg-12"> 24 <!-- content --> 25 @yield('content') 26 </div> 27 </div> 28 29 <!-- button area --> 30 <div class="row"> 31 32 @yield('button') 33 34 </div> 35 36 <!-- advertisement --> 37 <div class="row"> 38 <div class="col-lg-12 both-side-padding"> 39 @component('common.advertise_component') @endcomponent 40 </div> 41 </div> 42 </div> 43 </div> 44 45 </div> 46 </div> 47 48 <div class="footer">@include('common.footer_component')</div> 49 50</div>

CSS

1body { 2 line-height: 0.7rem; 3 height: 100vh; 4 margin: 0; 5 padding-top: 71px; 6 background: #ffa; 7} 8 9.wrapper { 10 position: relative; 11 overflow: hidden; 12 min-height: 100%; 13 padding-bottom: 130px; 14} 15 16.row { 17 background: #faf; 18 flex: 1; 19} 20 21.footer { 22 position: absolute; 23 bottom: 0; 24 display: table; 25 width: 100%; 26 height: 130px; 27 background: #faa; 28} 29

投稿2019/03/30 12:44

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gobindar

2019/03/30 13:02

ご丁寧に大変ありがとうございます。 再度試したところ、 d-none d-lg-block col-lg-2 no-padding の下にサイドバーの行(左側にサイドバーが少し、右は全てmarginだが、 marginのcss設定はない)ができ、 その下にclass="col-md-12 col-lg-10" が来る形となってしまいました。 ちなみに、 footerはcomponentの中に <div class="footer">がありますので、 追加せずcssのみ直しております。 (試しにご教示の通りでも実装してみましたがだめでした)
gobindar

2019/03/30 13:04

念のためfooterも質問にコードを追記致しました。
s8_chu

2019/03/30 13:14

> d-none d-lg-block col-lg-2 no-paddingの下にサイドバーの... サイドバーの下にサイドバーの行ができた、というように読めますが、どういう意味でしょうか? >念のためfooterも質問にコードを追記致しました。 すべてのコードを追記していただけませんか?現状ではこれ以上の回答は難しいと思います。
gobindar

2019/03/30 14:13

失礼致しました。 cssの構成上 d-none d-lg-block col-lg-2 no-paddingの下位にサイドバーが存在し、それが行を構成しており、 画面の見た目上は、そのサイドバー行の下にclass="col-md-12 col-lg-10"があります。 コード追記致しました。 大変多くの情報で申し訳ないのですが、 ご確認頂けますと大変幸甚です。
s8_chu

2019/03/30 14:31

> 画面の見た目上は、そのサイドバー行の下にclass="col-md-12 col-lg-10"があります。 こちらでは、そのような動作にはなっていませんが、質問者さんの環境ではそのようになっている、ということでしょうか? 質問者さんが実現したい動作は、このような動作でしょうか? https://codepen.io/anon/pen/oOvJqV
gobindar

2019/03/30 14:35

はい。サイドバーの右に大きくmarginができ、本来1行になるものが2行になってしまっている理由はわかりません。。。 そうです。 ご提示の通りの動作です。
s8_chu

2019/03/30 14:49

> ご提示の通りの動作です。 上記の動作が実現したい動作なのであれば、リンク先のコードを参考に、質問者さんのコードを変更してみてはいかがでしょうか?HTML, CSS を変更していますが、ほとんどが質問文のコードと変わっていないはずです。
gobindar

2019/03/30 14:50

s8_chu様 解決致しました。 container-fluidのpadding130pxを除いたところ、 うまくいきました。 また、サイドバーが潜ってしまう問題は、 rowの設定が上書きしきれてなかったことが原因でした。 お手数おかけして申し訳ありません。 長らく悩まされてきた問題でしたので、 非常にご丁寧な回答で、 とても助かりました。 また機会がありましたら、何卒、宜しくお願い致します。
s8_chu

2019/03/30 14:55

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

2019/03/30 15:11

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

2019/03/30 15: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>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問